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

{% block page_title %}{% trans 'Pay now by debit card' %} – {{ block.super }}{% endblock %}

{% block content %}
  {% notification_banners request 'send_money_landing' %}

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

      <header>
        <h1 class="govuk-heading-xl">{% trans 'Pay now by debit card' %}</h1>
      </header>

      <p class="govuk-body-l">
        {% trans 'Paying by debit card is fast, simple, reliable and free and the best way of sending money to a prisoner.' %}
      </p>

      <p>
        {% trans 'You can complete your payment here using Mastercard, Visa and Maestro debit cards.' %}
        {% trans 'Money usually takes less than 3 working days to reach a prisoner’s account, but may take longer.' %}
      </p>

      <p>
        {% trans 'You’ll get email confirmation of payment.' %}
      </p>

      <p>
        {% trans 'You can make an international payment using a debit card.' %}
      </p>

      {% include 'govuk-frontend/components/error-summary.html' with form=form only %}

      {% if form.payment_method.field.disabled %}

        <div class="govuk-error-summary" aria-labelledby="service-unavailable-heading" role="alert" data-module="govuk-error-summary">
          <h2 class="govuk-error-summary__title" id="service-unavailable-heading">
            {{ form.payment_method.field.message_to_users|default:_('This service is temporarily unavailable') }}
          </h2>
          <div class="govuk-error-summary__body">
            <p>
              {% trans 'Please try again later.' %}
            </p>
          </div>
        </div>

      {% else %}

        <form method="post">
          {% csrf_token %}
          {% with payment_method=form.payment_method.field.choices.0.0 %}
            <button name="{{ form.payment_method.html_name }}" value="{{ payment_method }}" id="id_{{ payment_method }}" class="govuk-button" data-module="govuk-button" data-prevent-double-click="true">
              {% trans 'Continue' %}
            </button>
          {% endwith %}
        </form>

      {% endif %}

      <br />

      <p>
        <a href="{% url 'help_area:help-cannot-access' %}">
          {% trans 'I don’t have a debit card / can’t access this service' %}
        </a>
      </p>

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