{{ header }}

<main id="account-account" class="franklin-account-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>

    {% if success %}
      <div class="alert alert-success alert-dismissible fade show account-success-alert" role="alert">
        <i class="bi bi-check-circle-fill"></i>
        <span>{{ success }}</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endif %}

    {{ content_top }}

    <section class="account-welcome">
      <div class="account-welcome-content">
        <span class="account-eyebrow">
          <i class="bi bi-shield-check"></i>
          Secure Customer Dashboard
        </span>

        <h1>{{ text_my_account }}</h1>

        <p>
          Manage your personal information, orders, addresses, wishlist and account preferences from one convenient place.
        </p>
      </div>

      <div class="account-welcome-icon" aria-hidden="true">
        <i class="bi bi-person-circle"></i>
      </div>
    </section>

    <section class="account-quick-grid" aria-label="Quick account actions">

      <a href="{{ edit }}" class="account-quick-card">
        <span class="account-card-icon"><i class="bi bi-person-vcard"></i></span>
        <span class="account-card-content">
          <strong>{{ text_edit }}</strong>
          <small>Update your personal details</small>
        </span>
        <i class="bi bi-arrow-up-right account-card-arrow"></i>
      </a>

      <a href="{{ order }}" class="account-quick-card">
        <span class="account-card-icon"><i class="bi bi-bag-check"></i></span>
        <span class="account-card-content">
          <strong>{{ text_order }}</strong>
          <small>View and track your purchases</small>
        </span>
        <i class="bi bi-arrow-up-right account-card-arrow"></i>
      </a>

      <a href="{{ address }}" class="account-quick-card">
        <span class="account-card-icon"><i class="bi bi-geo-alt"></i></span>
        <span class="account-card-content">
          <strong>{{ text_address }}</strong>
          <small>Manage delivery addresses</small>
        </span>
        <i class="bi bi-arrow-up-right account-card-arrow"></i>
      </a>

      <a href="{{ wishlist }}" class="account-quick-card">
        <span class="account-card-icon"><i class="bi bi-heart"></i></span>
        <span class="account-card-content">
          <strong>{{ text_wishlist }}</strong>
          <small>Review your saved products</small>
        </span>
        <i class="bi bi-arrow-up-right account-card-arrow"></i>
      </a>

    </section>

    <div class="account-dashboard-grid">

      <section class="account-panel">
        <div class="account-panel-heading">
          <span class="account-panel-icon"><i class="bi bi-person-gear"></i></span>
          <div>
            <h2>{{ text_my_account }}</h2>
            <p>Profile, security and payment settings</p>
          </div>
        </div>

        <div class="account-link-list">
          <a href="{{ edit }}" class="account-link-item">
            <span><i class="bi bi-pencil-square"></i>{{ text_edit }}</span>
            <i class="bi bi-chevron-right"></i>
          </a>
          <a href="{{ password }}" class="account-link-item">
            <span><i class="bi bi-key"></i>{{ text_password }}</span>
            <i class="bi bi-chevron-right"></i>
          </a>
          <a href="{{ payment_method }}" class="account-link-item">
            <span><i class="bi bi-credit-card"></i>{{ text_payment_method }}</span>
            <i class="bi bi-chevron-right"></i>
          </a>
          <a href="{{ address }}" class="account-link-item">
            <span><i class="bi bi-journal-bookmark"></i>{{ text_address }}</span>
            <i class="bi bi-chevron-right"></i>
          </a>
          <a href="{{ wishlist }}" class="account-link-item">
            <span><i class="bi bi-heart"></i>{{ text_wishlist }}</span>
            <i class="bi bi-chevron-right"></i>
          </a>
        </div>
      </section>

      <section class="account-panel">
        <div class="account-panel-heading">
          <span class="account-panel-icon"><i class="bi bi-box-seam"></i></span>
          <div>
            <h2>{{ text_my_orders }}</h2>
            <p>Orders, downloads and account activity</p>
          </div>
        </div>

        <div class="account-link-list">
          <a href="{{ order }}" class="account-link-item">
            <span><i class="bi bi-receipt"></i>{{ text_order }}</span>
            <i class="bi bi-chevron-right"></i>
          </a>
          <a href="{{ subscription }}" class="account-link-item">
            <span><i class="bi bi-arrow-repeat"></i>{{ text_subscription }}</span>
            <i class="bi bi-chevron-right"></i>
          </a>
          <a href="{{ download }}" class="account-link-item">
            <span><i class="bi bi-download"></i>{{ text_download }}</span>
            <i class="bi bi-chevron-right"></i>
          </a>
          {% if reward %}
            <a href="{{ reward }}" class="account-link-item">
              <span><i class="bi bi-gift"></i>{{ text_reward }}</span>
              <i class="bi bi-chevron-right"></i>
            </a>
          {% endif %}
          <a href="{{ return }}" class="account-link-item">
            <span><i class="bi bi-arrow-counterclockwise"></i>{{ text_return }}</span>
            <i class="bi bi-chevron-right"></i>
          </a>
          <a href="{{ transaction }}" class="account-link-item">
            <span><i class="bi bi-wallet2"></i>{{ text_transaction }}</span>
            <i class="bi bi-chevron-right"></i>
          </a>
        </div>
      </section>

    </div>

    <div class="account-secondary-grid">

      {% if affiliate %}
        <section class="account-secondary-card">
          <span class="account-secondary-icon"><i class="bi bi-people"></i></span>
          <div class="account-secondary-content">
            <h2>{{ text_my_affiliate }}</h2>
            <p>Manage your affiliate profile and tracking information.</p>
            <div class="account-secondary-actions">
              {% if not tracking %}
                <a href="{{ affiliate }}" class="btn btn-primary">
                  <i class="bi bi-person-plus"></i>{{ text_affiliate_add }}
                </a>
              {% else %}
                <a href="{{ affiliate }}" class="btn btn-primary">
                  <i class="bi bi-pencil-square"></i>{{ text_affiliate_edit }}
                </a>
                <a href="{{ tracking }}" class="btn account-btn-light">
                  <i class="bi bi-bar-chart"></i>{{ text_tracking }}
                </a>
              {% endif %}
            </div>
          </div>
        </section>
      {% endif %}

      <section class="account-secondary-card account-newsletter-card">
        <span class="account-secondary-icon"><i class="bi bi-envelope-paper"></i></span>
        <div class="account-secondary-content">
          <h2>{{ text_my_newsletter }}</h2>
          <p>Choose whether you would like to receive Franklin product news and wellness updates.</p>
          <a href="{{ newsletter }}" class="btn btn-primary">
            <i class="bi bi-envelope-check"></i>{{ text_newsletter }}
          </a>
        </div>
      </section>

    </div>

    {{ content_bottom }}

  </div>
</main>

{{ footer }}