{% extends 'base.html' %}
{% load i18n %}
{% load send_money %}

{% block page_title %}{% trans 'Payment successful' %} – {{ block.super }}{% endblock %}

{% block content %}

  <div class="govuk-panel mtp-panel--success">
    <h1 class="govuk-panel__title">{% trans 'Payment successful' %}</h1>
    <div class="govuk-panel__body">
      {% trans 'Your confirmation number is' %}
      <br />
      <strong>{{ short_payment_ref }}</strong>
    </div>
  </div>

  <div class="mtp-reference-actions govuk-!-margin-bottom-6 govuk-!-display-none-print">
    <a class="mtp-reference-actions__print" href="#">{% trans 'Print this page' %}</a>
  </div>

  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">

      <div class="govuk-inset-text">
        <table class="govuk-table">
          <caption class="govuk-visually-hidden">
            {% trans 'Details of your payment' %}
          </caption>
          <tbody>
            <tr>
              <th scope="row">{% trans 'Payment to' %}:</th>
              <td>{{ prisoner_name }}</td>
            </tr>
            <tr>
              <th scope="row">{% trans 'Amount' %}:</th>
              <td>{{ amount|currency_format }}</td>
            </tr>
            <tr>
              <th scope="row">{% trans 'Date payment made' %}:</th>
              <td>{% now 'd/m/Y' %}</td>
            </tr>
            <tr>
              <th scope="row">{% trans 'Confirmation number' %}:</th>
              <td>{{ short_payment_ref }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <h2 class="govuk-heading-m">{% trans 'What happens next' %}</h2>
      <ol class="govuk-list govuk-list--number">
        <li>
          {% trans 'We’ll email you a copy of this confirmation page.' %}
          {% trans 'Please check your spam folder.' %}
        </li>
        <li>{% trans 'Money usually takes less than 3 working days to reach a prisoner’s account, but may take longer.' %}</li>
      </ol>

      <p>
        <a href="https://www.gov.uk/done/send-prisoner-money">{% trans 'Take a moment to rate this service' %}</a> {% trans '(takes 30 seconds)' %}
      </p>

    </div>
  </div>
{% endblock %}