{{ header }}

<main id="account-gdpr" class="franklin-information-page franklin-gdpr-page">
  <div class="container">

    <nav class="franklin-breadcrumb information-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 gdpr-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="gdpr-hero">
      <div class="gdpr-hero-content">
        <span class="gdpr-eyebrow">
          <i class="bi bi-shield-lock"></i>
          Privacy & Personal Data
        </span>

        <h1>{{ heading_title }}</h1>
        <p>{{ text_gdpr|format(store, gdpr, title) }}</p>
      </div>

      <div class="gdpr-hero-icon" aria-hidden="true">
        <i class="bi bi-person-lock"></i>
      </div>
    </section>

    <div class="gdpr-layout">

      <aside class="gdpr-info-card">
        <span class="gdpr-info-icon"><i class="bi bi-shield-check"></i></span>
        <h2>Your Data Rights</h2>
        <p>Use this page to request an export of your personal information or initiate an account-data removal request.</p>

        <div class="gdpr-info-list">
          <div>
            <i class="bi bi-download"></i>
            <span><strong>Export Data</strong><small>Request a copy of personal data linked to your email address.</small></span>
          </div>

          <div>
            <i class="bi bi-trash3"></i>
            <span><strong>Remove Data</strong><small>Submit a request to remove eligible personal information.</small></span>
          </div>

          <div>
            <i class="bi bi-envelope-check"></i>
            <span><strong>Email Verification</strong><small>Your email address is used to verify the request.</small></span>
          </div>
        </div>
      </aside>

      <section class="gdpr-form-card">
        <form id="form-gdpr" action="{{ action }}" method="post" data-oc-toggle="ajax">

          <fieldset class="gdpr-section">
            <div class="gdpr-section-heading">
              <span><i class="bi bi-envelope"></i></span>
              <div>
                <legend id="account">{{ text_verification }}</legend>
                <p>{{ text_email }}</p>
              </div>
            </div>

            <div class="gdpr-form-group">
              <label for="input-email">{{ entry_email }}</label>
              <div class="gdpr-input-wrap">
                <i class="bi bi-envelope"></i>
                <input type="email" name="email" value="{{ email }}" placeholder="{{ entry_email }}" id="input-email" class="form-control" autocomplete="email"/>
              </div>
              <div id="error-email" class="invalid-feedback"></div>
            </div>
          </fieldset>

          <fieldset class="gdpr-section">
            <div class="gdpr-section-heading">
              <span><i class="bi bi-sliders"></i></span>
              <div>
                <legend id="action">{{ text_action }}</legend>
                <p>Select the action you would like Franklin to process.</p>
              </div>
            </div>

            <div class="gdpr-action-options">

              <label class="gdpr-action-option is-selected" for="input-export">
                <input type="radio" name="action" value="export" id="input-export" checked class="form-check-input"/>
                <span class="gdpr-option-icon"><i class="bi bi-download"></i></span>
                <span class="gdpr-option-content">
                  <strong>{{ text_export }}</strong>
                  <small>Request a downloadable copy of your personal information.</small>
                </span>
                <span class="gdpr-option-check"><i class="bi bi-check2"></i></span>
              </label>

              <label class="gdpr-action-option gdpr-remove-option" for="input-remove">
                <input type="radio" name="action" value="remove" id="input-remove" class="form-check-input"/>
                <span class="gdpr-option-icon"><i class="bi bi-trash3"></i></span>
                <span class="gdpr-option-content">
                  <strong>{{ text_remove }}</strong>
                  <small>Request removal of eligible personal information.</small>
                </span>
                <span class="gdpr-option-check"><i class="bi bi-check2"></i></span>
              </label>

            </div>

            <div id="collapse-remove" class="gdpr-warning-card" style="display:none;">
              <div class="gdpr-warning-heading">
                <i class="bi bi-exclamation-triangle-fill"></i>
                <strong>{{ text_warning }}</strong>
              </div>

              <ul>
                <li>{{ text_access|format(store) }}</li>
                <li>{{ text_history }}</li>
                <li>{{ text_limit|format(limit) }}</li>
              </ul>
            </div>
          </fieldset>

          <div class="gdpr-actions">
            <a href="{{ cancel }}" class="btn gdpr-secondary-button">
              <i class="bi bi-x-circle"></i>
              {{ button_cancel }}
            </a>

            <button type="submit" class="btn btn-primary gdpr-primary-button">
              <i class="bi bi-arrow-right-circle"></i>
              {{ button_continue }}
            </button>
          </div>

        </form>
      </section>

    </div>

    {{ content_bottom }}

  </div>
</main>

<script type="text/javascript"><!--
$('input[name="action"]').on('change', function() {
    $('.gdpr-action-option').removeClass('is-selected');
    $(this).closest('.gdpr-action-option').addClass('is-selected');

    if (this.value === 'remove') {
        $('#collapse-remove').stop(true, true).slideDown();
    } else {
        $('#collapse-remove').stop(true, true).slideUp();
    }
});
//--></script>

{{ footer }}