{{ header }}

<main id="account-return-info" class="franklin-account-page franklin-return-info-page">
  <div class="container">

    <nav class="franklin-breadcrumb account-breadcrumb" aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
            {% if loop.last %}
              {{ breadcrumb.text }}
            {% else %}
              <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
            {% endif %}
          </li>
        {% endfor %}
      </ol>
    </nav>

    {{ content_top }}

    <section class="return-info-hero">
      <div class="return-info-hero-content">
        <span class="return-info-eyebrow">
          <i class="bi bi-box-arrow-in-left"></i>
          Return Information
        </span>

        <h1>{{ text_return_id }} #{{ return_id }}</h1>

        <p>
          Review the return request, original order details, selected reason, requested action and progress history.
        </p>
      </div>

      <a href="{{ continue }}" class="return-info-back-link">
        <i class="bi bi-arrow-left"></i>
        {{ button_continue }}
      </a>
    </section>

    <section class="return-summary-grid">

      <article class="return-summary-card">
        <span class="return-summary-icon">
          <i class="bi bi-hash"></i>
        </span>

        <div>
          <small>{{ text_return_id }}</small>
          <strong>#{{ return_id }}</strong>
        </div>
      </article>

      <article class="return-summary-card">
        <span class="return-summary-icon">
          <i class="bi bi-calendar-check"></i>
        </span>

        <div>
          <small>{{ text_date_added }}</small>
          <strong>{{ date_added }}</strong>
        </div>
      </article>

      <article class="return-summary-card">
        <span class="return-summary-icon">
          <i class="bi bi-receipt-cutoff"></i>
        </span>

        <div>
          <small>{{ text_order_id }}</small>
          <strong>#{{ order_id }}</strong>
        </div>
      </article>

      <article class="return-summary-card">
        <span class="return-summary-icon">
          <i class="bi bi-calendar3"></i>
        </span>

        <div>
          <small>{{ text_date_ordered }}</small>
          <strong>{{ date_ordered }}</strong>
        </div>
      </article>

    </section>

    <section class="return-product-card">

      <div class="return-section-heading">
        <span>
          <i class="bi bi-box-seam"></i>
        </span>

        <div>
          <h2>Returned Product</h2>
          <p>Product information recorded with this return request.</p>
        </div>
      </div>

      <div class="return-product-row">
        <div class="return-product-main">
          <span class="return-product-icon">
            <i class="bi bi-bag"></i>
          </span>

          <div>
            <small>{{ column_product }}</small>
            <strong>{{ product }}</strong>
          </div>
        </div>

        <div class="return-product-stat">
          <small>{{ column_model }}</small>
          <strong>{{ model }}</strong>
        </div>

        <div class="return-product-stat">
          <small>{{ column_quantity }}</small>
          <strong>{{ quantity }}</strong>
        </div>
      </div>

    </section>

    <section class="return-detail-grid">

      <article class="return-detail-card">
        <span class="return-detail-card-icon">
          <i class="bi bi-question-circle"></i>
        </span>

        <div>
          <small>{{ text_reason }}</small>
          <strong>{{ reason }}</strong>
        </div>
      </article>

      <article class="return-detail-card">
        <span class="return-detail-card-icon">
          <i class="bi bi-box2"></i>
        </span>

        <div>
          <small>{{ text_opened }}</small>
          <strong>{{ opened }}</strong>
        </div>
      </article>

      <article class="return-detail-card">
        <span class="return-detail-card-icon">
          <i class="bi bi-lightning-charge"></i>
        </span>

        <div>
          <small>{{ text_action }}</small>
          <strong>
            {% if action %}
              {{ action }}
            {% else %}
              {{ text_tbc }}
            {% endif %}
          </strong>
        </div>
      </article>

    </section>

    {% if comment %}
      <section class="return-comment-card">
        <span class="return-comment-icon">
          <i class="bi bi-chat-left-text"></i>
        </span>

        <div>
          <h2>{{ text_comment }}</h2>
          <p>{{ comment }}</p>
        </div>
      </section>
    {% endif %}

    <section class="return-history-card">

      <div class="return-section-heading">
        <span>
          <i class="bi bi-clock-history"></i>
        </span>

        <div>
          <h2>{{ text_history }}</h2>
          <p>Updates and comments recorded against this return request.</p>
        </div>
      </div>

      <div id="history">
        {{ history }}
      </div>

    </section>

    <div class="return-info-footer-action">
      <a href="{{ continue }}" class="btn btn-primary">
        <i class="bi bi-arrow-left"></i>
        {{ button_continue }}
      </a>
    </div>

    {{ content_bottom }}

  </div>
</main>

<script type="text/javascript"><!--
$('#history').on('click', '.pagination a', function(e) {
    e.preventDefault();
    $('#history').load(this.href);
});
//--></script>

{{ footer }}