18F/calc

{% extends 'data_capture/base.html' %}
{% load data_capture data_explorer_tags %}

{% block head_meta %}
  {% capture as title %}
    Add price data to CALC / {{ step.description|capfirst }}
  {% endcapture %}
  {% head_meta title=title %}
{% endblock %}

{% block body %}
  <div class="card">
    <div class="content">
      {% if replay %}
        <div class="usa-alert usa-alert-warning" role="alert">
          <h4>This is a replay!</h4>

          <p>You are replaying <a href="{% url 'admin:data_capture_attemptedpricelistsubmission_change' replay.id %}">price list submission attempt #{{ replay.id }}</a>.</p>

          <p>The following is probably what
            <strong>{{ replay.submitter.email }}</strong> saw
            when attempting to submit a price list on
            <strong>{{ replay.created_at|tz_timestamp }}</strong>.
          </p>

          <form method="post">
            {% csrf_token %}
            <button type="submit" name="cancel" class="usa-button usa-button-secondary" formnovalidate>Exit this replay</button>
          </form>
        </div>
      {% endif %}

      {% block steps %}
      {{ step.widget }}
      {% endblock %}

      <h1>
        {% block page_heading %}{% endblock %}
        <span class="usa-sr-only">{{ step.description }}</span>
      </h1>
      {% block step_heading %}{% endblock %}
    </div><!--content -->
  </div><!--card-->
  <div class="card">
    <div class="content">
      {% include 'data_capture/messages.html' %}
    </div>

    <div class="content">
      {% block step_body %}{% endblock %}
    </div>
  </div><!--card-->
  <div class="card__footer">
    {% block card_footer %}{% endblock %}
  </div>
{% endblock %}

{% block modals %}
  {{ block.super }}
  <div id="cancel-dialog" aria-hidden="true" class="dialog">
    <div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide></div>
    <div class="dialog-content" role="dialog" aria-labelledby="cancel-dialog-title" aria-describedby="cancel-dialog-content">
      <div role="document">
        <h1 id="cancel-dialog-title">
          Are you sure you'd like to cancel?
        </h1>

        <p id="cancel-dialog-content">
          If you choose to cancel, CALC will discard all of the information you've entered.
        </p>

        <div class="dialog-buttons">
          <button class="usa-button usa-button-primary" data-a11y-dialog-hide>
            No, keep working
          </button>
          <form method="post">
            {% csrf_token %}
            <button type="submit" name="cancel" class="usa-button usa-button-secondary">
              Yes, discard my work
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock modals %}