{{ header }}
<header class="background-white bottom-margin-large">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box vertical-padding-large flex between-xs middle-xs">
          <div>
            <span class="text-x-large text-dark">{{ heading_title }}</span>
            <div class="adm-breadcrumb">
              {% for breadcrumb in breadcrumbs %}
                <i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
                <a class="text-x-small text-gray text-decoration-none" href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
              {% endfor %}
            </div>
          </div>
          <div class="flex flex-row middle-xs">
            <a href="{{ cancel }}" class="btn-default btn-medium btn-outline right-margin-small">
              <span>{{ button_cancel }}</span>
            </a>
            <button class="btn-default btn-primary btn-medium js-submit-main-form">
              <span>{{ button_save }}</span>
            </button>
          </div>
        </div>
        {% if error_warning %}
          <div class="warning full-width">{{ error_warning }}</div>
        {% endif %}
      </div>
    </div>
  </div>
</header>
<div class="container-fluid">
  <form action="{{ action }}" method="post" class="js-main-form">
    <div class="row">
      <div class="col-xs-12 col-md-4 last-md">
        <div class="content-box padding-large background-white shadow-small">
          <div class="row">
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label required">{{ entry_name }}</span>
                <input class="field-entry" type="text" name="name" value="{{ name }}" />
                {% if error_name %}
                  <span class="text-error">{{ error_name }}</span>
                {% endif %}
              </label>
            </div>
            <div class="col-xs-12">
              <label class="field field-medium">
                <span class="field-label required">{{ entry_description }}</span>
                <input class="field-entry" type="text" name="description" value="{{ description }}" />
                {% if error_description %}
                  <span class="text-error">{{ error_description }}</span>
                {% endif %}
              </label>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-md-8">
        <div class="content-box">
          <div class="row small-space-xs" id="zone-to-geo-zone">
            {% set zone_to_geo_zone_row = 0 %}
            {% for zone_to_geo_zone in zone_to_geo_zones %}
              <div class="col-xs-12 zone-row">
                <div class="content-box background-white padding-large bottom-margin-small shadow-small" id="zone-to-geo-zone-row{{ zone_to_geo_zone_row }}">
                  <div class="row">
                    <div class="col-xs">
                      <label class="field field-medium">
                        <span class="field-label">{{ entry_country }}</span>
                        <select class="field-entry select-country" name="zone_to_geo_zone[{{ zone_to_geo_zone_row }}][country_id]" id="country{{ zone_to_geo_zone_row }}">
                          {% for country in countries %}
                            <option value="{{ country.country_id }}" {{ country.country_id == zone_to_geo_zone.country_id ? 'selected="selected"' : '' }}>
                              {{ country.name }}
                            </option>
                          {% endfor %}
                        </select>
                      </label>
                    </div>
                    <div class="col-xs">
                      <label class="field field-medium">
                        <span class="field-label">{{ entry_zone }}</span>
                        <select
                          class="field-entry select-zone"
                          name="zone_to_geo_zone[{{ zone_to_geo_zone_row }}][zone_id]"
                          data-zoneid="{{ zone_to_geo_zones[zone_to_geo_zone_row].zone_id }}"
                          id="zone{{ zone_to_geo_zone_row }}">
                        </select>
                      </label>
                    </div>
                    <div class="col-xs-width-auto">
                      <button type="button" class="btn-default btn-medium-square js-remove-row top-margin-medium btn-error btn-remove-row">
                        <i class="fas fa-times"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            {% set zone_to_geo_zone_row = zone_to_geo_zone_row + 1 %}
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-width-auto">
      <button id="add_zone" type="button" class="btn-default btn-medium btn-primary">
        <span>{{ button_add_geo_zone }}</span>
      </button>
    </div>
  </form>
</div>
<script type="text/javascript">
  var
    zone_to_geo_zone_row = '{{ zone_to_geo_zone_row }}',
    countries = {{ countries|json_encode() }},
    token = '{{ token }}',
    countryDefault = {{ config_country_id }},
    zoneDefault = {{ config_zone_id }}

    entrycountry = '{{ entry_country }}',
    entryZone = '{{ entry_zone }}';
</script>
<script src="./view/javascript/geo_zone_form.js"></script>
{{ footer }}