{{ header }}
<header class="background-white bottom-margin-large">
  <div class="container-fluid">
    <div class="row no-space-xs">
      <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 href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">
                  {{ breadcrumb.text }}
                </a>
              {% endfor %}
            </div>
          </div>
          <div>
            <a href="{{ cancel }}" class="btn-default btn-outline btn-medium">{{ button_cancel }}</a>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="flex js-tabs" id="tab-info"></div>
      </div>
    </div>
  </div>
</header>
<div class="container-fluid" data-tabs-id="tab-info">

  <div id="tab-return" class="row hidden" data-tab="{{ tab_return }}">
    <div class="col-xs-12 bottom-padding-small">
      <span class="text-x-large text-dark">{{ tab_return }}</span>
    </div>
    <div class="col-xs-12 col-md-8">
      <div class="content-box background-white shadow-small padding-large">
        <div class="row">
          <div class="col-xs-12">
            <div class="content-box">
              <span class="text-x-small text-dark text-bold">{{ text_return_id }}</span>
              <span class="text-small text-dark">{{ return_id }}</span>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="content-box">
              {% if order %}
                <span class="text-x-small text-dark text-bold">{{ text_order_id }}</span>
                <a href="{{ order }}" class="text-decoration-none text-primary">{{ order_id }}</a>
              {% else %}
                <span class="text-x-small text-dark text-bold">{{ text_order_id }}</span>
                <span class="text-small text-dark">{{ order_id }}</span>
              {% endif %}
            </div>
          </div>
          <div class="col-xs-12">
            <div class="content-box">
              <span class="text-x-small text-dark text-bold">{{ text_date_ordered }}</span>
              <span class="text-small text-dark">{{ date_ordered }}</span>
            </div>
          </div>
          <div class="col-xs-12">
            {% if customer %}
              <span class="text-x-small text-dark text-bold">{{ text_customer }}</span>
              <a href="{{ customer }}" class="text-decoration-none text-primary">{{ firstname }} {{ lastname }}</a>
            {% else %}
              <span class="text-x-small text-dark text-bold">{{ text_customer }}</span>
              <span class="text-small text-dark">{{ firstname }} {{ lastname }}</span>
            {% endif %}
          </div>
          <div class="col-xs-12">
            <div class="content-box">
              <span class="text-x-small text-dark text-bold">{{ text_email }}</span>
              <span class="text-small text-dark">{{ email }}</span>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="content-box">
              <span class="text-x-small text-dark text-bold">{{ text_telephone }}</span>
              <span class="text-small text-dark">{{ telephone }}</span>
            </div>
          </div>
          {% if return_status %}
            <div class="col-xs-12">
              <div class="content-box">
                <span class="text-x-small text-dark text-bold">{{ text_return_status }}</span>
                <span class="text-small text-dark">{{ return_status }}</span>
              </div>
            </div>
          {% endif %}
          <div class="col-xs-12">
            <div class="content-box">
              <span class="text-x-small text-dark text-bold">{{ text_date_added }}</span>
              <span class="text-small text-dark">{{ date_added }}</span>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="content-box">
              <span class="text-x-small text-dark text-bold">{{ text_date_modified }}</span>
              <span class="text-small text-dark">{{ date_modified }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="tab-product" class="row hidden" data-tab="{{ tab_product }}">
    <div class="col-xs-12 bottom-padding-small">
      <span class="text-x-large text-dark">{{ tab_product }}</span>
    </div>
    <div class="col-xs-12 col-md-8">
      <div class="content-box background-white shadow-small padding-large">
        <div class="row">
          <div class="col-xs-12">
            <div class="content-box">
              <span class="text-x-small text-dark text-bold">{{ text_product }}</span>
              <span class="text-small text-dark">{{ product }}</span>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="content-box">
              <span class="text-x-small text-dark text-bold">{{ text_model }}</span>
              <span class="text-small text-dark">{{ model }}</span>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="content-box">
              <span class="text-x-small text-dark text-bold">{{ text_quantity }}</span>
              <span class="text-small text-dark">{{ quantity }}</span>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="content-box">
              <span class="text-x-small text-dark text-bold">{{ text_return_reason }}</span>
              <span class="text-small text-dark">{{ return_reason }}</span>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="content-box">
              <span class="text-x-small text-dark text-bold">{{ text_opened }}:</span>
              <span class="text-small text-dark">{{ opened }}</span>
            </div>
          </div>
          <div class="col-xs-12">
            <label class="field field-medium">
              <span class="field-label">{{ text_return_action }}</span>
              <select class="field-entry" name="return_action_id">
              <option value="0"></option>
                {% for return_action in return_actions %}
                  <option
                    value="{{ return_action.return_action_id }}"
                    {{ return_action.return_action_id == return_action_id ? 'selected="selected"' : '' }}
                  >
                    {{ return_action.name }}
                  </option>
                {% endfor %}
              </select>
            </label>
          </div>
          {% if comment %}
            <div class="col-xs-12">
              <div class="content-box">
                <span class="text-x-small text-dark text-bold">{{ text_comment }}</span>
                <span class="text-small text-dark">{{ comment }}</span>
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div id="tab-history" class="row hidden" data-tab="{{ tab_history }}">
    <div class="col-xs-12 bottom-padding-small">
      <span class="text-x-large text-dark">{{ tab_history }}</span>
    </div>
    <div class="col-xs-12 col-md-8">
      <div id="history"></div>
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="content-box background-white shadow-small padding-large">
        <div class="row">
          <div class="col-xs-12">
            <label class="field field-medium">
              <span class="field-label">{{ entry_return_status }}</span>
              <select class="field-entry" name="return_status_id">
                {% for return_status in return_statuses %}
                  <option
                    value="{{ return_status.return_status_id }}"
                    {{ return_status.return_status_id == return_status_id ? 'selected="selected"' : '' }}
                  >
                    {{ return_status.name }}
                  </option>
                {% endfor %}
              </select>
            </label>
          </div>
          <div class="col-xs-12">
            <label class="checkbox checkbox-medium">
              <input class="checkbox-entry" type="checkbox" name="notify" value="1" />
              <span class="checkbox-text">{{ entry_notify }}</span>
            </label>
          </div>
          <div class="col-xs-12">
            <div class="content-box">
              <span class="text-x-small text-dark text-bold">{{ entry_comment }}:</span>
              <textarea class="field-entry" name="comment" cols="40" rows="8"></textarea>
              <button id="button-history" class="btn-default btn-medium btn-primary top-margin-medium">
              <span>{{ button_add_history }}</span></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  var
    returnId = '{{ return_id }}',
    textWait = '{{ text_wait }}';
</script>
{{ footer }}