<!-- Get Data maybe from strapi -->
<div class="flex flex-col">
  <!-- Check if open jobs are available -->
  {{ if le (index (.Site.Data.jobs) 0) 0 }}
    <div class="flex-auto">
      <h2>There are currently no open jobs to apply for</h2>
      <p class="small">Please again to a different time</p>
    </div>
  {{ end }}

  <!-- Range through all available job offerings -->
  {{ range .Site.Data.jobs }}
    <div class="flex-auto">
      <h2>{{.title}}</h2>
      {{ if gt (len .sub) 0 }}
        <div class="flex flex-row text-2xl">
          {{ range .sub }}
            {{ if (eq .source "mdi" ) }}
              <span class="iconify" data-icon="mdi-{{.icon}}"></span>
            {{ else }}
              <span class="icon">
                <img height="20" width="20" src="https://cdn.jsdelivr.net/npm/simple-icons@v10/icons/{{.icon}}.svg" />
              </span>
            {{ end }}
          {{ end }}
        </div>
      {{ end }}
      <p>{{.description}}</p>
    </div>
    <button 
      type="button" 
      class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 max-w-2xs"
      onclick="openApplyForm('{{.title}}')">Apply</button>
  {{ end }}
</div>

<form action="/" id="apply-form" class="invisible">
  <div class="color-background"></div>
  <div class="content">
    <div class="inner">
      <div class="close-btn" onclick="closeApplyForm()"></div>
      <div class="supertitle">Your application as:</div>
      <h3 id="title-h3" class="title"></h3>
      <p class="lead">Great, you've made the first step. We look forward to your application</p>
      <div class="apply-row">
        <div class="apply-section -contact">
          <h4>Your contact data</h4>
          <div class="inner">
            <label for="ign">Ingame Name *</label>
            <input class="rounded-md" type="text" name="ign" id="ign" placeholder="Your Minecraft ingame Name">
            <label for="contact">How to contact you *</label>
            <input class="rounded-md" type="text" name="contact" id="contact" placeholder="Discord-tag / e-mail-address">
            <label for="experience">Your experience in this is position *</label>
            <textarea class="rounded-md" name="experience" id="experience" cols="30" rows="5"></textarea>
            <label for="references">Your references *</label>
            <textarea class="rounded-md" name="" id="" cols="30" rows="5"></textarea>
          </div>
        </div>
        <div class="apply-section -docs">
          <h4>Your comments</h4>
          <div class="inner">
            <label for="comments">Would you like to tell us something?</label>
            <textarea class="rounded-md" name="comments" id="comments" cols="30" rows="5"></textarea>
          </div>
        </div>
        <div class="apply-section -submit">
          <div class="legal">By submitting your application, you accept our <a href="/privacy">privacy policy</a> and confirm that you have taken note of it.</div>
          <div class="submit-btn">
            <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 max-w-2xs">Submit</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
