{{define "body_content"}}
<p class="title is-4">Ich bestelle...</p>
<div class="message is-danger">
  <div class="message-body">
Aktuell noch in Entwicklung, kommen Sie sp&auml;ter noch einmal vorbei...
  </div>
</div>

<div class="columns">
  <div class="column is-one-quarter">
    <img src="/static/images/wo-bisch-tracker-product.jpg">
  </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>
    <br />
      <div class="content">
        Im Preis enthalten:
        <ul>
          <li>GPS Tracker mit integriertem Akku</li>
          <li>Ladekabel USB-Typ-A</li>
          <li>2 Dual Lock Klettpad 25,4mm x 50mm 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">
            <input class="input" type="number" id="quantity" name="quantity" min="1" max="5" value="1">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="columns">
  <div class="column is-half">
    <div class="field">
      <label class="label">E-Mail</label>
      <div class="control has-icons-left has-icons-right">
        <input class="input is-danger" type="email" placeholder="max.mustermann@example.com" value="">
        <span class="icon is-small is-left">
          <i class="fas fa-envelope"></i>
        </span>
        <span class="icon is-small is-right">
          <i class="fas fa-exclamation-triangle"></i>
        </span>
      </div>
      <p class="help is-danger">This email is invalid</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" placeholder="Lieferadresse"></textarea>
      </div>
    </div>
  </div>
  <div class="column is-half">
    <div class="field">
      <label class="label">Rechnungsadresse</label>
      <div class="control">
        <textarea class="textarea" placeholder="leer lassen, wenn wie Lieferadresse"></textarea>
      </div>
    </div>
  </div>
</div>

<div class="field">
  <div class="control">
    <label class="checkbox">
      <input type="checkbox">
      Ich stimme den <a href="#">Gesch&auml;ftsbedingungen</a> zu
    </label>
  </div>
</div>

<div class="field is-grouped">
  <div class="control">
    <button class="button is-link">Bestellen</button>
  </div>
  <div class="control">
    <button class="button is-link is-light">Abbrechen</button>
  </div>
</div>
{{end}}