<!-- Template Version: 4 -->
<style>
  * { box-sizing: border-box; }

  @page { size: A4; margin: 10mm; }

  body {
    font-family: Arial, Helvetica, sans-serif;
    color: #1f2937;
    font-size: 9pt;
    line-height: 1.25;
    margin: 0;
    padding: 0;
  }

  .page { width: 100%; position: relative; z-index: 1; }

  .watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 72pt;
    color: rgba(220, 38, 38, 0.12);
    font-weight: bold;
    letter-spacing: 7px;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }

  .header {
    margin-bottom: 5.5mm;
    min-height: 29mm;
  }

  .logo-right {
    float: right;
    width: 42mm;
    margin-left: 4mm;
    text-align: right;
  }

  .header-text { overflow: hidden; }

  .title {
    font-size: 14.5pt;
    font-weight: bold;
    color: #0f172a;
    margin: 0 0 1mm 0;
  }

  .subtitle {
    margin: 0;
    font-size: 9.2pt;
    color: #4b5563;
  }

  .rule {
    margin: 2.8mm 0 2.4mm 0;
    border: 0;
    border-top: 2px solid #d97706;
  }

  .fee-banner {
    margin: 0 0 2.4mm 0;
    padding: 1.9mm 2.5mm;
    background: #fff7ed;
    border-left: 4px solid #d97706;
    font-size: 10pt;
    font-weight: bold;
    color: #9a3412;
  }

  .note {
    margin: 0 0 1.3mm 0;
    font-style: italic;
    color: #374151;
  }

  .note-line {
    margin: 0 0 3.8mm 0;
    color: #111827;
    font-weight: bold;
  }

  .pane {
    border: 1px solid #d1d5db;
    margin: 0 0 3.6mm 0;
  }

  .pane-title {
    background: #f3f4f6;
    border-bottom: 1px solid #d1d5db;
    padding: 1.5mm 2.2mm;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 8pt;
    color: #374151;
  }

  .pane-body { padding: 2.1mm 2.2mm; }

  .two-col {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .two-col td {
    width: 50%;
    vertical-align: top;
    padding: 0 1.5mm;
  }

  .two-col td:first-child { padding-left: 0; }
  .two-col td:last-child { padding-right: 0; }

  table.details {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  table.details td {
    border: 1px solid #e5e7eb;
    padding: 1.5mm 2mm;
    vertical-align: top;
  }

  table.details td.label {
    width: 40%;
    font-weight: bold;
    color: #374151;
    background: #f9fafb;
  }

  table.details td.value {
    width: 60%;
    color: #111827;
    font-weight: bold;
  }

  .instruction-box {
    margin: 0 0 3.6mm 0;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    padding: 2mm 2.4mm;
    color: #374151;
  }

  .sign {
    width: 100%;
    border-collapse: collapse;
    margin-top: 3.2mm;
  }

  .sign td {
    width: 50%;
    border: 1px solid #d1d5db;
    padding: 2.4mm 2.6mm;
    vertical-align: bottom;
  }

  .sig-label {
    font-size: 8.1pt;
    font-weight: bold;
    color: #374151;
    margin-bottom: 4.8mm;
  }

  .sig-line {
    border-bottom: 1px solid #111827;
    height: 4.2mm;
  }

  .payments {
    margin-top: 3.8mm;
    border-top: 1px solid #d1d5db;
    padding-top: 2.8mm;
  }

  .payments-title {
    font-size: 9.2pt;
    font-weight: bold;
    margin: 0 0 2mm 0;
    color: #111827;
  }

  .payments p { margin: 0 0 1.9mm 0; }

  .clear { clear: both; }
</style>

<div class="watermark">DRAFT</div>
<div class="page">
  <div class="header">
    <div class="logo-right">{{ pdf_asset("Fen Edge Logo") }}</div>
    <div class="header-text">
      <p class="title">Membership Renewal 2026-2027</p>
      <p class="subtitle">Fen Edge Community Association</p>
      <hr class="rule">
      <div class="fee-banner">Group Membership Fee: GBP15</div>
      <p class="note">Please amend any details that have changed before returning this form.</p>
      <p class="note-line">Please amend:</p>
    </div>
    <div class="clear"></div>
  </div>

  <div class="pane">
    <div class="pane-title">Account And Public Contact</div>
    <div class="pane-body">
      <table class="two-col">
        <tr>
          <td>
            <table class="details">
              <tr><td class="label">Account</td><td class="value">{{ account_name }}</td></tr>
              <tr><td class="label">Type</td><td class="value">{{ account_type }}</td></tr>
              <tr><td class="label">Sector</td><td class="value">{{ account_sector }}</td></tr>
              <tr><td class="label">Public Location</td><td class="value">{{ public_location }}</td></tr>
              <tr><td class="label">Members</td><td class="value">{{ account_no_of_members }}</td></tr>
            </table>
          </td>
          <td>
            <table class="details">
              <tr><td class="label">Public Contact</td><td class="value">{{ public_contact_name }}</td></tr>
              <tr><td class="label">Public Email</td><td class="value">{{ public_contact_public_email }}</td></tr>
              <tr><td class="label">Public Phone</td><td class="value">{{ public_contact_public_phone }}</td></tr>
              <tr><td class="label">Facebook</td><td class="value">tbd</td></tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <div class="pane">
    <div class="pane-title">Primary Contact (Contact 1)</div>
    <div class="pane-body">
      <table class="details">
        <tr><td class="label">Name</td><td class="value">{{ contact_1_name }}</td></tr>
        <tr><td class="label">Position</td><td class="value">{{ contact_1_position }}</td></tr>
        <tr><td class="label">Address</td><td class="value">{{ contact_1_address_1 }} {{ contact_1_address_2 }}, {{ contact_1_town }}, {{ contact_1_county }}, {{ contact_1_postcode }}</td></tr>
        <tr><td class="label">Email</td><td class="value">{{ contact_1_email }}</td></tr>
        <tr><td class="label">Phone / Mobile</td><td class="value">{{ contact_1_phone }} {{ contact_1_mobile }}</td></tr>
      </table>
    </div>
  </div>

  <div class="pane">
    <div class="pane-title">Secondary Contacts</div>
    <div class="pane-body">
      <table class="two-col">
        <tr>
          <td>
            <table class="details">
              <tr><td class="label">Contact 2 Name</td><td class="value">{{ contact_2_name }}</td></tr>
              <tr><td class="label">Position</td><td class="value">{{ contact_2_position }}</td></tr>
              <tr><td class="label">Email</td><td class="value">{{ contact_2_email }}</td></tr>
              <tr><td class="label">Phone / Mobile</td><td class="value">{{ contact_2_phone }} {{ contact_2_mobile }}</td></tr>
            </table>
          </td>
          <td>
            <table class="details">
              <tr><td class="label">Fen Contact Name</td><td class="value">{{ fen_contact_name }}</td></tr>
              <tr><td class="label">Fen Contact Email</td><td class="value">{{ fen_contact_email }}</td></tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <div class="instruction-box">
    Please check your group’s public contact details on the FECA website:
    <strong>www.fenedge.co.uk/full-members-list</strong> and advise any changes.
  </div>

  <table class="sign">
    <tr>
      <td>
        <div class="sig-label">Signed</div>
        <div class="sig-line"></div>
      </td>
      <td>
        <div class="sig-label">Date</div>
        <div class="sig-line"></div>
      </td>
    </tr>
  </table>

  <div class="payments">
    <p class="payments-title">Payment Options</p>
    <p><strong>1. Cheque:</strong> payable to <strong>Fen Edge Community Association</strong>, sent with this form to <strong>FECA Community Office, Cottenham Village College, Cottenham, CB24 8UA</strong>.</p>
    <p><strong>2. BACS:</strong> <strong>Sort Code 20-17-22</strong>, <strong>Account No. 40349178</strong>; then scan and email the form to <strong>info@fenedge.co.uk</strong>.</p>
  </div>
</div>
