{% if page.contact %}
<div class="green contact">
  <div class="container">
    <h1>{{ site.data.contact.title  }}</h1>
    {{ site.data.contact.introduction  }}
    <form action="{{ site.data.contact.action }}"  class="columns">
        <div class="column is-6">
            <div class="field">
                <label class="label">Name</label>
                <div class="control has-icons-left">
                  <input class="input" type="text" id="name" name="name" placeholder="Name" required>
                  <span class="icon is-small is-left">
                    <i class="fas fa-user"></i>
                  </span>
                </div>
              </div>
              <div class="field">
                <label class="label">E-Mail</label>
                <div class="control has-icons-left">
                  <input class="input" type="email" id="email" name="email" placeholder="E-Mail">
                  <span class="icon is-small is-left">
                    <i class="fas fa-envelope"></i>
                  </span>
                </div>
              </div>
              <div class="field">
                <label class="label">Thema</label>
                <div class="control">
                  <div class="select">
                    <select id="thema" name="thema">
                      <option value="Sonstige">Sonstige</option>
                      <option value="Plattform">Plattform</option>
                      <option value="Innovationskoffer">Innovationskoffer</option>
                      <option value="Methoden">Methoden</option>
                      <option value="Prototypen">Prototypen</option>
                      <option value="Stories">Stories</option>
                    </select>
                  </div>
                </div>
              </div>
        </div>
        <div class="column is-6">
            <div class="field">
                <label class="label">Nachricht</label>
                <div class="control">
                  <textarea
                      class="textarea"
                      id="message"
                      name="message"
                      placeholder="Hier tippen"
                      required=""
                  ></textarea>
                </div>
              </div>
              <div class="checkbox columns">
                <div class="column contact-box">
                  <input class="column" type="checkbox" id="agree" name="privacy-policy" value="agreed" required oninvalid="this.setCustomValidity('Bitte dieses Feld anklicken, um fortzufahren')"
                       oninput="this.setCustomValidity('')">
                </div>
                
                <div class="column">
                  <label for="agree">{{ site.data.contact.checkbox  }}</label><br><br>
                  <button class="button is-rounded is-dark" type="submit">Abschicken</button>
                </div>
              </div>
        </div>
    </form>
  </div>
</div>
{% endif %}