Transaction Summary Page

<h1 class="h3 text-uppercase fw-bolder">Transaction summary</h1>

<div class="border-top border-3 border-primary my-3 py-3 pb-0">
  <p>
    <a href="#" class="btn btn-primary">Return to transaction history</a>
  </p>
</div>

{% if not error %}
  <div class="border-top border-3 border-primary my-3 py-3 pb-0">

    <h2 class="h4 text-uppercase fw-bolder">E-tickets</h2>
    <p>
      Your QR barcode below covers all tickets and items purchased in this order.<br>
      Our front of house team will scan your QR barcode on arrival. No printing required!
    </p>
    <p>
      <a href="#" class="btn btn-primary">Re-send email</a>
    </p>

  </div>

  <div class="border-top border-3 border-primary my-3 py-3 pb-1 d-md-flex">

    <div class="text-center align-self-center p-5 flex-shrink-0">
      <img src="/images/samples/qr-code.png" alt="QR code sample" class="img-fluid">
    </div>

    <table class="table">
      <tbody>
        <tr>
          <th>Customer details</th>
          <td>Ms Testella Testington-Testforth</td>
        </tr>
        <tr>
          <th>Date</th>
          <td>2023-03-07 12:56:50</td>
        </tr>
        <tr>
          <th>Transaction ID</th>
          <td>33:1234567</td>
        </tr>
        <tr>
          <th>Transaction Ref</th>
          <td>33:WEB002:070323:125335640LO</td>
        </tr>
      </tbody>
    </table>

  </div>
      
  {% if tickets_count %}
  <div class="border-top border-2 border-primary my-3 py-3">

    <h2 class="h4 text-uppercase fw-bolder">Tickets purchased ({{ tickets_count }})</h2>

    <table class="table">
      <thead>
        <tr>
          <th>Event</th>
          <th>Qty</th>
          <th>Item</th>
        </tr>
      </thead>
      <tbody class="table-group-divider">
        <tr>
          <td><a href="#" class="fw-bolder">Sophie Duker: Hag</a> @ Pleasance Courtyard in Beside @ 2022-08-25 19:30:00</td>
          <td>1</td>
          <td>FULL PRICE</td>
        </tr>
        <tr>
          <td><a href="#" class="fw-bolder">Sophie Duker: Hag</a> @ Pleasance Courtyard in Beside @ 2022-08-25 19:30:00</td>
          <td>1</td>
          <td>Concession</td>
        </tr>
        <tr>
          <td><a href="#" class="fw-bolder">Helen Bauer: Madam Good Tit</a> @ Pleasance Courtyard in Bunker Two @ 2022-08-27 17:40:00</td>
          <td>1</td>
          <td>FULL PRICE</td>
        </tr>
        <tr>
          <td><a href="#" class="fw-bolder">Helen Bauer: Madam Good Tit</a> @ Pleasance Courtyard in Bunker Two @ 2022-08-27 17:40:00</td>
          <td>1</td>
          <td>Concession</td>
        </tr>
        <tr>
          <td><a href="#" class="fw-bolder">Sarah Keyworth: Lost Boy</a> @ Pleasance Courtyard in Cabaret Bar @ 2022-08-26 17:40:00</td>
          <td>1</td>
          <td>FULL PRICE</td>
        </tr>
        <tr>
          <td><a href="#" class="fw-bolder">Sarah Keyworth: Lost Boy</a> @ Pleasance Courtyard in Cabaret Bar @ 2022-08-26 17:40:00</td>
          <td>1</td>
          <td>Concession</td>
        </tr>
        <tr>
          <td><a href="#" class="fw-bolder">Tim Vine: Breeeep!</a> @ Pleasance Courtyard in Pleasance One @ 2022-08-25 18:00:00</td>
          <td>1</td>
          <td>FULL PRICE</td>
        </tr>
        <tr>
          <td><a href="#" class="fw-bolder">Tim Vine: Breeeep!</a> @ Pleasance Courtyard in Pleasance One @ 2022-08-25 18:00:00</td>
          <td>1</td>
          <td>Concession</td>
        </tr>
        <tr>
          <td><a href="#" class="fw-bolder">Chloe Petts: Transience</a> @ Pleasance Courtyard in Upstairs @ 2022-08-28 18:00:00</td>
          <td>1</td>
          <td>FULL PRICE</td>
        </tr>
        <tr>
          <td><a href="#" class="fw-bolder">Chloe Petts: Transience</a> @ Pleasance Courtyard in Upstairs @ 2022-08-28 18:00:00</td>
          <td>1</td>
          <td>Concession</td>
        </tr>
      </tbody>
    </table>

  </div>  
  {% endif %}

  {% if donations_count %}
  <div class="border-top border-2 border-primary my-3 py-3">

    <h2 class="h4 text-uppercase fw-bolder">Donations ({{ donations_count }})</h2>

    <table class="table">
      <thead>
        <th>Fund</th>
        <th>Amount</th>
      </thead>
      <tbody class="table-group-divider">
        <td>Pleasance Theatre Trust</td>
        <td>£5.00</td>
      </tbody>
    </table>

  </div>
  {% endif %}

  <div class="border-top border-2 border-primary my-3 py-3">

    <table class="table">
      <tbody>
        <tr>
          <th>SubTotal</th>
          <td>£45.67</td>
        </tr>
        <tr>
          <th>Handling Fee</th>
          <td>£5.00</td>
        </tr>
        <tr>
          <th>Postage Fee</th>
          <td>£0.00</td>
        </tr>
        <tr>
          <th>Discounts</th>
          <td>£12.34</td>
        </tr>
      </tbody>
      <tfoot class="table-group-divider">
        <tr>
          <th>Total</th>
          <td>£123.45</td>
        </tr>
      </tfoot>
    </table>

  </div>

{% else %}
  <div class="border-top border-bottom border-3 border-primary my-3 py-3 pb-0">

    <h2 class="h4 text-uppercase fw-bolder">Error retrieving transaction</h2>
    <p>Sorry, we appear to have had some difficulties retrieving your transaction information.  However, it is very likely your transaction went through regardless so please do check your email for a confirmation message.</p>

  </div>
{% endif %}

<div class="text-center">
  <a href="#" class="btn btn-primary">Back to the shows</a>
</div>