{{ 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 js-header-notifications">
          <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>
            <button class="btn-default btn-medium btn-primary js-submit-main-form">
              <span>{{ button_insert }}</span>
            </button>
          </div>
          {% if error_warning %}<div class="warning full-width top-margin-small">{{ error_warning }}</div>{% endif %}
          {% if success %}<div class="success full-width top-margin-small">{{ success }}</div>{% endif %}
        </div>
      </div>
    </div>
  </div>
</header>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="content-box">
        <form action="{{ action }}" method="post" class="js-main-form">
          <div class="accordion-status flex-column bottom-border-gray background-white shadow-small bottom-margin-small">
            {% if order_statuses %}
              {% for order_status in order_statuses %}
                <div class="{{ (order_status.message) ? 'first-xs active' : '' }} cursor-pointer border-gray padding-small background-gray flex between-xs js-accordion-control">
                  <span class="text-medium text-bold">{{ order_status.name }}</span>
                </div>
                <div class="{{ (order_status.message) ? 'first-xs' : '' }} horizontal-border-gray js-accordion-content">
                  <textarea class="full-width" name="status[{{ order_status.order_status_id }}]" rows="4" placeholder="Digite aqui o texto referente a este status.">{{ order_status.message }}</textarea>
                </div>
              {% endfor %}
            {% else %}
              <div class="row">
                <div class="col-xs-12">
                  <div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center">
                    <span class="text-medium text-gray">{{ text_no_results }}</span>
                  </div>
                </div>
              </div>
            {% endif %}
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<style>
textarea {
  border: none;
  outline: none;
}
.js-accordion-control {
  position: relative;
}
.js-accordion-control > *:first-child {
  padding-left: 16px;
}
.js-accordion-control::after,
.js-accordion-control::before {
  content: '';
  position: absolute;
  display: block;
  background: #222;
  transition: .3s linear;
}
.js-accordion-control::before {
  transition-delay: .05s;
}
.js-accordion-control::after {
  top: 13px;
  left: 6px;
  height: 3px;
  width: 11px;
}
.js-accordion-control::before {
  top: 9px;
  left: 10px;
  height: 11px;
  width: 3px;
}
.js-accordion-control.active::before {
  transform: rotate(-90deg);
}
.js-accordion-control.active::after {
  transform: rotate(180deg);
}
</style>
<script src="../catalog/view/theme/vista/js/accordion-futura.js"></script>
<script>
  $('.accordion-status').accordionFutura({
    onlyOneActive: false, // True: Abre um e fecha os outros elementos
    initFirstActive: false // True: Deixa o primeiro elemento aberto
  });
</script>
{{ footer }}
