@using Leica.Spider.BusinessCenter.Frontend.Utils
@* Keep this in template in sync with the one in the User area where we have slighly different structure due to styling of the SmartAdmin template *@
@Scripts.Render("~/bundles/RegionSelector")
@Styles.Render("~/Content/RegionSelector")
<script type="text/x-handlebars-template"
        id="regionsTemplate">
    <div class="regionSelector smart-form">
        <input type="hidden" name="{{selectedRegionsInputName}}" />
            <div class="col-6 regionPerSubscription">
                <label asp-for="RegionsPerSubscription">@Lang.Html("IDS_PACKAGES_VIEW_DF_REGION_PER_SUBSCRIPTION_LABEL")</label>
                <input type="text" name="{{regionsPerSubscriptionInputName}}" value="{{regionsPerSubscription}}">
            </div>

        <div class="regionSelectorLabels">
            <div class="regionMapWrapper">
                <label>@Lang.Html("IDS_REGIONS_VIEW_ASSIGNED_REGIONS_LABEL")</label>
            </div>
            <div class="regionListWrapper">
                <div class="regionsSelectionAndUnselection">
                    <a class="selectAllRegions" href="#">@Lang.Html("IDS_REGIONS_VIEW_SELECT_ALL_LABEL")</a>/
                    <a class="unselectAllRegions" href="#">@Lang.Html("IDS_REGIONS_VIEW_UNSELECT_LABEL")</a>
                </div>
            </div>
        </div>
        <div class="regionSelectorSelectionControls">
            <div class="regionMapWrapper">
                <div class="map regionMap"></div>
            </div>
            <div class="regionListWrapper">
                <div class="regionList">
                    {{#each regions}}
                    <div class="regionsWithCheckboxes">
                        <label class="checkbox regionNameLabel">
                            <input type="checkbox" name="checkbox" class="regionCheckBox" value="{{Id}}" >
                            <i></i>{{Name}}
                        </label>
                    </div>
                    {{/each}}
                </div>
            </div>
        </div>
    </div>
</script>