{{ header }}
<section class="container-fluid">
  {% if content_top %}
    {{ content_top }}
  {% endif %}
  {{breadcrumbs}}

  <div class="row">
    <div class="col-md-3 hidden-md-down">
      <div class="content-box js-fixed-on-top">
        {{ account }}
      </div>
    </div>
    <div class="col-xs">
      <div class="content-box">
        <div class="flex middle-xs">
          <a href="{{ back }}" class="padding-small text-x-large text-dark">
            <i class="fas fa-angle-left" aria-hidden="true"></i>
          </a>
          <span class="heading-1">{{ heading_title }}</span>
        </div>

        {% if histories %}
          {% for history in histories %}
            <div class="paper padding-large vertical-margin-medium">
              <div class="flex nowrap-xs between-xs middle-xs">
                <span class="text-medium text-dark text-bold">{{history.status}}</span>
                <span class="text-medium text-gray">{{history.date_added}}</span>
              </div>
              {% if history.comment %}
                <span class="visible-block text-small text-dark top-margin-small">{{history.comment}}</span>
              {% endif %}
            </div>
          {% endfor %}
        {% endif %}

        <div class="paper bottom-padding-large left-padding-large bottom-margin-medium top-margin-medium">
          <div class="row no-space-xs">
            <div class="col-xs-6">
              <div class="content-box top-padding-large right-padding-large">
                <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_return_id }}</span>
                <span class="visible-block text-medium text-dark text-bold">{{ return_id }}</span>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="content-box top-padding-large right-padding-large">
                <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_date_added }}</span>
                <span class="visible-block text-medium text-dark text-bold">{{ date_added }}</span>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="content-box top-padding-large right-padding-large">
                <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_order_id }}</span>
                <span class="visible-block text-medium text-dark text-bold">{{ order_id }}</span>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="content-box top-padding-large right-padding-large">
                <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_date_ordered }}</span>
                <span class="visible-block text-medium text-dark text-bold">{{ date_ordered }}</span>
              </div>
            </div>
            {% if action %}
              <div class="col-xs-12">
                <div class="content-box top-padding-large right-padding-large">
                  <span class="visible-block text-small text-gray bottom-margin-x-small">{{ column_action }}</span>
                  <span class="visible-block text-medium text-dark text-bold">{{ action }}</span>
                </div>
              </div>
            {% endif %}
          </div>
        </div>

        <div class="paper padding-large top-margin-medium">
          <div>
            <span class="visible-block text-small text-gray bottom-margin-x-small">{{ column_reason }}</span>
            <span class="visible-block text-medium text-dark text-bold">{{ reason }}</span>
          </div>
          {% if comment %}
            <div class="top-padding-large">
              <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_comment }}</span>
              <span class="visible-block text-medium text-dark text-bold">{{ comment }}</span>
            </div>
          {% endif %}
        </div>

        <div class="row x-small-space-xs no-space-md middle-xs between-xs vertical-padding-x-large">
          <div class="col-xs-12 col-md">
            <span class="visible-block text-small text-gray">(Cód item. {{ model }})</span>
            <span class="visible-block text-medium text-dark text-bold">{{ product }}</span>
          </div>
          <div class="col-xs-12 col-md-width-auto">
            <div class="content-box flex">
              <div class="right-padding-small right-border-gray">
                <span class="visible-block text-small text-gray">Qtd.</span>
                <span class="visible-block text-medium text-dark text-bold">{{ quantity }}</span>
              </div>
              <div class="horizontal-padding-small">
                <span class="visible-block text-small text-gray">{{ column_opened }}</span>
                <span class="visible-block text-medium text-dark text-bold">{{ opened }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% if column_right %}
      <div class="col-md-3 hidden-md-down">
        {{ column_right }}
      </div>
    {% endif %}
  </div>

  {% if content_bottom %}
    {{ content_bottom }}
  {% endif %}
</section>
{{ footer }}



