<!-- upload menu -->

<div class="row bg px-3" id="upload">
	<div class="col-lg-2"></div>
	<div class="col-lg-8">
    <h2 class="text-center">Bild hochladen</h2>


    {# form #}

    <form id="form" enctype="multipart/form-data" method="POST" action="/uploaded" class="bg-white mx-4  border rounded-3 p-3 needs-validation" novalidate>
            <!-- errorMessage if not all options are given or image is bigger than 4MB -->

        {% if errorMessage is not empty %}
        <div id="errorMessage" class="alert alert-danger">
          <p>{{ errorMessage }}</p>
        </div>
        {% endif %}

            <!-- info text -->

        <div>
          <p class="alert alert-secondary" role="alert">
            Wichtig:
            <br />
            Mit der Einsendung durch eine erziehungsberechtigte Person (Info an Lehrkräfte: Bitte keine Bilder im Klassenverband schicken) wird einer Bearbeitung, Nutzung und Veröffentlichung zugestimmt.
          </p>
        </div>

              <!-- picture upload + email  -->

        <div class="mb-3">
              <label for="formFile" class="form-label">Wähle dein Bild aus:</label>
              <input class="form-control" type="file" name="imageInput" id="formFile" required>
              <div class="invalid-feedback">Bitte wähle eine Datei aus</div>
        </div>

            <div class="d-flex flex-wrap gap-3">
              <div class="mb-3 col-sm-7 col-md-5">
                  <label for="username" class="form-label">Name</label>
                  <input type="text" class="form-control" name="username" id="username" placeholder="Max" required >
                  <div class="invalid-feedback">Bitte gebe den Namen des Künstlers oder der Künstlerin an</div>
              </div>

              <div class="mb-3 col-sm-7 col-md-5">
                  <label for="age" class="form-label">Alter</label>
                  <input type="number" class="form-control" name="age" id="age" placeholder="0"  required min="0">
                  <div class="invalid-feedback">Bitte gebe das Alter des Künstlers oder der Künstlerin an</div>
              </div>
            </div>

            <div class="mb-3 col-sm-7 col-md-6">
                  <label for="exampleFormControlInput1" class="form-label">Email-Adresse</label>
                  <input type="email" class="form-control" name="emailInput" id="exampleFormControlInput1" placeholder="max@mustermann.com" required>
                  <div class="invalid-feedback">Bitte gebe deine Emailadresse an</div>
            </div>


              <!-- tags -->

            <div class="mb-3 custom_upload_checkboxes rounded">
                  <div class="mb-3 ">Was ist auf dem Bild zu sehen?</div>
                  <div class="invalid-feedback">Bitte wähle eine Eigenschaft aus</div>
                      <!-- content tags -->
                      <!-- changed btn-secondary to green-btn <label class="btn btn-secondary mb-2" for="option2">U-Boot</label> -->
                      
                      <input type="checkbox" class="btn-check" name="content[]" value="submarine" id="option2" autocomplete="off">
                      <label class="btn green-btn mb-2" for="option2">U-Boot</label>

                      <input type="checkbox" class="btn-check" name="content[]" value="sailingboat" id="option3" autocomplete="off">
                      <label class="btn green-btn mb-2" for="option3">Segelboot</label>

                      <input type="checkbox" class="btn-check" name="content[]" value="steamboat" id="option4" autocomplete="off">
                      <label class="btn green-btn mb-2" for="option4">Dampfer</label>

                      <input type="checkbox" class="btn-check" name="content[]" value="freighter" id="option5" autocomplete="off">
                      <label class="btn green-btn mb-2" for="option5">Frachter</label>

                      <input type="checkbox" class="btn-check" name="content[]" value="seanimal" id="option6" autocomplete="off">
                      <label class="btn green-btn mb-2" for="option6">Meerestier</label>

                      <input type="checkbox" class="btn-check" name="content[]" value="hotairballoon" id="option7" autocomplete="off">
                      <label class="btn green-btn mb-2" for="option7">Heißluftballon</label>

                      <input type="checkbox" class="btn-check" name="content[]" value="pirateboat" id="option8" autocomplete="off">
                      <label class="btn green-btn mb-2" for="option8">Piratenschiff</label>

                      <input type="checkbox" class="btn-check" name="content[]" value="helicopter" id="option9" autocomplete="off">
                      <label class="btn green-btn mb-2" for="option9">Hubschrauber</label>
            </div>


                  <!-- direction -->
            <div class="mb-3">
                <div class="mb-3">Falls das Bild von einem Boot ist, in welche Richtung fährt es?</div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" id="inlineRadio1" name="direction" value="left" required>
                    <label class="form-check-label" for="inlineRadio1">Fahrtrichtung links</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" id="inlineRadio2" name="direction" value="right" required>
                    <label class="form-check-label" for="inlineRadio2">Fahrtrichtung rechts</label>
                    <div class="invalid-feedback">Bitte wähle eine Fahrtrichtung aus</div>
                </div>
            </div>
                  
          

            <input type="submit" class="btn blue-btn btn-lg px-4 gap-3" value="Bild hochladen">
    </form>

    <br><br>
  </div> 
  <div class="col-lg-2"></div>
</div>
<!-- upload menu -->