{{define "body_content"}}
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="static/js/order.js"></script>

<div id="success_message" class="message is-success is-hidden">
  <div class="message-body">
    <p class="has-text-weight-bold">Vielen Dank!</p>
    <p>Ihre Bestellung wird gep&uuml;ft. Sie erhalten die Rechnung per E-Mail. Nach Zahlungseingang wird der Zugang eingerichtet und sie erhalten den/die GPS Tracker per Post.</p>
  </div>
</div>
<div id="modal" class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">GPS Tracker bestellen</p>
    </header>
    <div class="modal-card-body">
      <!-- Content ... -->
      <div class="columns">
        <div class="column is-one-quarter">
          <figure class="image is-1by1">
            <img src="/static/images/wo-bisch-tracker-product.png" alt="GPS Tracker Produktbild">
          </figure>
        </div>
        <div class="column is-three-quarters">
          <p class="is-size-2 has-text-weight-bold">CHF 150.00</p>
          <p class="is-size-7 neg-margin-1">pro Stück, inkl. MwSt.</p>
        </div>
      </div>
      <div class="content">
        Im Preis enthalten:
        <ul>
          <li>GPS Tracker mit integriertem Akku</li>
          <li>USB-Netzadapter mit Ladekabel USB-Typ-A</li>
          <li>2 Dual Lock Klettpad 25 x 25mm zum optionalen einfachen Befestigen</li>
          <li>12 Monate Abo, <span class="has-text-weight-bold">anschliessend CHF 5.00 pro Monat</span></li> 
        </ul>
      </div>
      <div class="columns">
        <div class="column is-one-quarter">
          <div class="field">
            <label class="label">Bestellmenge</label>
            <div class="control has-icons-right">
              <input class="input" type="text" id="quantity" value="1">
              <span id="quantity_exclamation" class="icon is-small is-right">
                <i class="fas fa-exclamation-triangle"></i>
              </span>
            </div>
            <p id="quantity_errormsg" class="help is-danger"></p>
          </div>
        </div>
        <div class="column is-three-quarters">
          <div class="field">
            <label class="label">E-Mail</label>
            <div class="control has-icons-left has-icons-right">
              <input class="input" type="email" id="email" placeholder="max.mustermann@example.com" value="">
              <span class="icon is-small is-left">
                <i class="fas fa-envelope"></i>
              </span>
              <span id="email_exclamation" class="icon is-small is-right">
                <i class="fas fa-exclamation-triangle"></i>
              </span>
            </div>
            <p id="email_errormsg" class="help is-danger"></p>
          </div>
        </div>
      </div>
      <div class="columns">
        <div class="column is-half">
          <div class="field">
            <label class="label">Lieferadresse</label>
            <div class="control">
              <textarea class="textarea has-fixed-size" rows="5" maxlength="250" id="delivery_address" placeholder="Lieferadresse" autocomplete="off"></textarea>
            </div>
            <p id="delivery_address_errormsg" class="help is-danger"></p>
          </div>
        </div>
        <div class="column is-half">
          <div class="field">
            <label class="label">Rechnungsadresse</label>
            <div class="control">
              <textarea class="textarea has-fixed-size" rows="5" maxlength="250" id="billing_address" placeholder="leer lassen, wenn wie Lieferadresse" autocomplete="off"></textarea>
            </div>
            <p id="billing_address_errormsg" class="help is-danger"></p>
          </div>
        </div>
      </div>
      
      <div class="field">
        <div class="control">
          <label id="accept_terms_label" class="checkbox">
            <input id="accept_terms" type="checkbox">
            Ich stimme den <a href="static/files/AGB-wo-bisch.pdf" target="_blank">Gesch&auml;ftsbedingungen</a> zu
          </label>
        </div>
        <p id="accept_terms_errormsg" class="help is-danger"></p>
      </div>
      <div id="error_message" class="message is-danger is-hidden">
        <div class="message-body">
          <p class="has-text-weight-bold">Oops!</p>
          <p>Da ist etwas schiefgegangen... Bitte melden bei Kontaktadresse!</p>
        </div>
      </div>
    </div>
    <footer class="modal-card-foot">
      <button id="modal-save" class="button is-success">Bestellen</button>
      <button id="modal-close" class="button">Abbrechen</button>
    </footer>
  </div>
</div>
{{end}}