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

{% block page_title %}{% trans 'Enter amount to send' %} – {{ block.super }}{% endblock %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">

      <header>
        <h1 class="govuk-heading-xl">
          <span class="govuk-caption-xl">{% trans 'Pay now by debit card' %}</span>
          {% trans 'Enter amount to send' %}
        </h1>
      </header>

      <form method="post" action=".">
        {% csrf_token %}

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

        <div {% if service_charged %}class="mtp-service-charge" data-percentage-charge="{{ service_charge_percentage }}" data-fixed-charge="{{ service_charge_fixed }}"{% endif %}>
          {% include 'mtp_common/forms/amount-field.html' with field=form.amount only %}

          {% if service_charged %}
            <p>
              {% blocktrans trimmed with charge_percentage=service_charge_percentage|format_percentage charge_fixed=service_charge_fixed|currency_format_pence %}
                The service charge is {{ charge_percentage }} of the amount you’re sending, plus {{ charge_fixed }}.
              {% endblocktrans %}
              {% trans 'This fee is charged by your card provider.' %}
            </p>
            <p class="mtp-service-charge__description">
              {% blocktrans trimmed with sample_amount=sample_amount|currency_format sample_amount_total_charge=sample_amount|add_service_charge|currency_format %}
                For instance, if you want to send {{ sample_amount }}, you will be charged {{ sample_amount_total_charge }}.
              {% endblocktrans %}
            </p>
            <dl class="govuk-summary-list mtp-service-charge__totals">
              <div class="govuk-summary-list__row">
                <dt class="govuk-summary-list__key">
                  {% trans 'Service charge' %}
                </dt>
                <dd class="govuk-summary-list__value mtp-service-charge__service-charge"></dd>
              </div>
              <div class="govuk-summary-list__row">
                <dt class="govuk-summary-list__key">
                  {% trans 'Total to pay' %}
                </dt>
                <dd class="govuk-summary-list__value mtp-service-charge__total"></dd>
              </div>
            </dl>
          {% endif %}
        </div>

        <p>
          <input id="id_next_btn" class="govuk-button" data-module="govuk-button" data-prevent-double-click="true" type="submit" value="{% trans 'Check details' %}">
        </p>
      </form>

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