{{ define "main" }}
<div class="article-list">
  <article>
    <style>
      .article-details {
        padding-bottom: 0;
      }
    </style>
    {{ partial "article/components/header" . }}
    <section class="article-content">{{ .Content | safeHTML }}</section>
  </article>
</div>

<style>
  input,
  textarea {
    margin-bottom: 1rem;
  }
  textarea {
    padding: 40px 20px 20px;
    border-radius: var(--card-border-radius);
    background-color: var(--card-background);
    box-shadow: var(--shadow-l1);
    color: var(--card-text-color-main);
    width: 100%;
    border: 0;
    -webkit-appearance: none;
    transition: box-shadow 0.3s ease;
    font-size: 1.5rem;
    padding: 30px 20px 15px;
    height: 300px;
  }
  p {
    color: var(--card-text-color-main);
  }
  #submit-button {
    position: relative;
    background-color: var(--card-background);
    width: min-content;
    box-shadow: var(--shadow-l1);
    border-radius: var(--card-border-radius);
    color: var(--card-text-color-main);
    height: 4rem;
    width: 8rem;
  }
  #submit-button:hover {
    background-color: var(--card-background-selected);
  }
</style>
<form
  class="search-form widget"
  action="https://forms.cantorgymnasium.de/form/schuelerzeitung-kontakt"
  method="post"
>
  <div hidden>
    <input id="bad_email" type="text" name="bad_email" required />
  </div>
  <p>
    <label>Name</label>
    <input id="name" type="text" name="name" required />
  </p>
  <p>
    <label>Klasse</label>
    <input id="class" type="text" name="class" required />
  </p>
  <p>
    <label>E-Mail-Adresse</label>
    <input id="email" type="text" name="email" required />
  </p>
  <p>
    <label>Nachricht</label>
    <textarea id="message" name="message" required></textarea>
  </p>
  <p>
    <button id="submit-button" type="submit" value="send">Senden</button>
  </p>
</form>

{{ partial "article/components/footer" . }}
  {{ partialCached "footer/footer" . }}
{{ end }}