{% extends "content_template.html" %}
{% from "components/page-header.html" import page_header %}

{% from "components/copy-to-clipboard.html" import copy_to_clipboard %}

{% block per_page_title %}
  Billing details
{% endblock %}

{% block content_column_content %}

    {{ page_header('Billing details') }}

    <p>
      You can use the information on this page to add the Cabinet Office as a supplier. Your organization may need to do this before you can raise a purchase order (PO).
    </p>

    <p>
      <a class="usa-link" href="{{ url_for('main.support') }}">Contact us</a> if you need any other details.
    </p>

    <h2 class="heading-medium" id="supplier-details">
      Supplier details
    </h2>

    <p>
      Cabinet Office
    </p>

    <p>
      The White Chapel Building <br>
      10 Whitechapel High Street <br>
      London <br>
      E1 8QS
    </p>

    <h3 class="font-body-lg" id="email-addresses">
      Email addresses
    </h3>

    <ul class="usa-list usa-list--bullet">
      {% for email in billing_details['notify_billing_email_addresses'] %}
      <li>
        {{ email }}
      </li>
      {% endfor %}
    </ul>

    <h3 class="font-body-lg" id="vat-number">
      <abbr title="Value Added Tax">VAT</abbr> number
    </h3>

    <div>
    {{ copy_to_clipboard(
        'GB 88 88 010 80',
        thing='<abbr title="Value Added Tax">VAT</abbr> number',
    ) }}
    </div>

    <h2 class="heading-medium" id="bank-details">
      Bank details
    </h2>

    <p>
      National Westminster Bank PLC (part of RBS group) <br>
      Government Banking Services Branch <br>
      2nd Floor <br>
      280 Bishopsgate <br>
      London <br>
      EC2M 4RB
    </p>

    <h3 class="font-body-lg" id="account-name">
      Account name
    </h3>

    <p>
      Cabinet Office
    </p>

    <h3 class="font-body-lg" id="account-number">
      Account number
    </h3>

    <div>
    {{ copy_to_clipboard(
        billing_details['account_number'],
        thing='account number',
      ) }}
    </div>

    <h3 class="font-body-lg" id="sort-code">
      Sort code
    </h3>

    <div>
    {{ copy_to_clipboard(
        billing_details['sort_code'],
        thing='sort code',
      ) }}
    </div>


    <h3 class="font-body-lg" id="iban">
      <abbr title="International Bank Account Number">IBAN</abbr>
    </h3>
    <div>
    {{ copy_to_clipboard(
        billing_details['IBAN'],
        thing='IBAN',
      ) }}
    </div>

    <h3 class="font-body-lg" id="swift-code">
      Swift code
    </h3>

    <div>
    {{ copy_to_clipboard(
        billing_details['swift'],
        thing='Swift code',
      ) }}
    </div>

    <h2 class="heading-medium" id="invoice-address">
      Invoice address
    </h2>

    <p>
      SSCL – Accounts Receivable <br>
      PO Box 221 <br>
      Thornton-Cleveleys <br>
      Blackpool <br>
      Lancashire <br>
      FY1 9JN
    </p>

{% endblock %}