<template>
  <div v-if="show" class="overlaydiv">
    <div class="overlaycontentdiv nopadding">
      <div class="overlayscrolldiv">
        <div class="scrollcontentdiv">
          <div class="overlayheader nospace">AUFGABE</div>
          <div class="lightdiv">
            <img
              src="images/veritas_status_rot.png"
              width="12"
              height="12"
              alt
              class="excercisestatusimage"
            >
          </div>
          <div class="columns w-row">
            <div class="column w-col w-col-6">
              <div class="text-block-6">Bezeichnung:&nbsp;</div>
            </div>
            <div class="column-2 w-col w-col-6">
              <div class="form-block-3 w-form">
                <form id="email-form" name="email-form" data-name="Email Form">
                  <input
                    type="text"
                    id="name"
                    name="name"
                    data-name="Name"
                    maxlength="256"
                    class="text-field-2 w-input"
                  >
                </form>
                <div class="w-form-done"></div>
                <div class="w-form-fail"></div>
              </div>
            </div>
          </div>
          <div class="columns-2 w-row">
            <div class="column-3 w-col w-col-6">
              <div class="text-block-6">Beschreibung:</div>
            </div>
            <div class="column-4 w-col w-col-6">
              <div class="form-block-4 w-form">
                <form id="email-form-2" name="email-form-2" data-name="Email Form 2">
                  <input
                    type="text"
                    id="name-2"
                    name="name-2"
                    data-name="Name 2"
                    maxlength="256"
                    class="text-field-3 w-input"
                  >
                </form>
                <div class="w-form-done"></div>
                <div class="w-form-fail"></div>
              </div>
            </div>
          </div>
          <div class="separatordiv lessspace"></div>
          <div class="columns w-row">
            <div class="column w-col w-col-6">
              <div class="text-block-6 large">Buch auswählen:</div>
            </div>
            <div class="column-2 w-col w-col-6">
              <div class="form-block-3 w-form">
                <form id="email-form" name="email-form" data-name="Email Form">
                  <select id="field" name="field" class="select-field-2 w-select">
                    <option value="Another Choice">EiC Basic</option>
                  </select>
                </form>
                <div class="w-form-done"></div>
                <div class="w-form-fail"></div>
              </div>
            </div>
          </div>
          <div class="columns w-row">
            <div class="column w-col w-col-6">
              <div class="text-block-6 large">Paket auswählen:</div>
            </div>
            <div class="column-2 w-col w-col-6">
              <div class="form-block-3 w-form">
                <form id="email-form" name="email-form" data-name="Email Form">
                  <select
                    id="field-3"
                    name="field-3"
                    data-name="Field 3"
                    class="select-field-2 w-select"
                  >
                    <option value="Another Choice">1. Auflage</option>
                    <option value="Another Choice">2. Auflage</option>
                    <option value="Another Choice">3. Auflage</option>
                  </select>
                </form>
                <div class="w-form-done"></div>
                <div class="w-form-fail"></div>
              </div>
            </div>
          </div>
          <div class="columns w-row">
            <div class="column w-col w-col-6">
              <div class="text-block-6 large">Kapitel auswählen:</div>
            </div>
            <div class="column-2 w-col w-col-6">
              <div class="form-block-3 w-form">
                <form id="email-form" name="email-form" data-name="Email Form">
                  <select
                    id="field-4"
                    name="field-4"
                    data-name="Field 4"
                    class="select-field-2 w-select"
                  >
                    <option value="Another Choice">Kapitel 1</option>
                    <option value="Another Choice">Kapitel 2</option>
                    <option value="Another Choice">Kapitel 3</option>
                  </select>
                </form>
                <div class="w-form-done"></div>
                <div class="w-form-fail"></div>
              </div>
            </div>
          </div>
          <div class="columns w-row">
            <div class="column w-col w-col-6">
              <div class="text-block-6 large">Thema auswählen:</div>
            </div>
            <div class="column-2 w-col w-col-6">
              <div class="form-block-3 w-form">
                <form id="email-form" name="email-form" data-name="Email Form">
                  <select
                    id="field-5"
                    name="field-5"
                    data-name="Field 5"
                    class="select-field-2 w-select"
                  >
                    <option value="Another Choice">Modern Business</option>
                    <option value="Another Choice">Family</option>
                  </select>
                </form>
                <div class="w-form-done"></div>
                <div class="w-form-fail"></div>
              </div>
            </div>
          </div>
          <div class="separatordiv lessspace"></div>
          <div class="columnswithpadding w-row">
            <div class="column-5 right w-col w-col-6">
              <div class="text-block-6 large">Fertigkeit auswählen:</div>
            </div>
            <div class="column-6 w-col w-col-6">
              <div class="assignmentdiv">
                <div class="assignmentheader">FERTIGKEITEN</div>
                <div class="assignmentbody">
                  <div class="assignmentcolumn small">
                    <div class="assignmentcolumnheader">Verfügbar</div>
                    <div class="assignmentcolumnscrolldiv">
                      <div class="assignmentcolumncontent">
                        <div class="assignmentcontenttext">Lesen</div>
                        <div class="assignmentcontenttext">Schreiben</div>
                      </div>
                    </div>
                  </div>
                  <div class="assignmentbuttons">
                    <a href="#" class="arrowrightbutton w-button"></a>
                    <a href="#" class="arrowleftbutton w-button"></a>
                  </div>
                  <div class="assignmentcolumn small">
                    <div class="assignmentcolumnheader">Zugeordnet</div>
                    <div class="assignmentcolumnscrolldiv">
                      <div class="assignmentcolumncontent">
                        <div class="assignmentcontenttext">Hören</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="columns w-row">
            <div class="column-7 w-col w-col-6">
              <div class="text-block-6 large">Aufgabentyp wählen:</div>
            </div>
            <div class="column-8 w-col w-col-6">
              <div class="form-block-4 w-form">
                <form id="email-form" name="email-form" data-name="Email Form">
                  <select
                    id="field-5"
                    name="field-5"
                    data-name="Field 5"
                    class="select-field-2 w-select"
                  >
                    <option value="Another Choice">Multiple Choice</option>
                    <option value="Another Choice">Single Choice</option>
                  </select>
                </form>
                <div class="w-form-done"></div>
                <div class="w-form-fail"></div>
              </div>
            </div>
          </div>
          <div class="overlayheader">DATEI&nbsp;UPLOAD</div>
          <div class="uploaddiv">
            <div class="uploadtext">Aufgabe:</div>
            <div class="form-block-6 w-form">
              <form id="email-form-3" name="email-form-3" data-name="Email Form 3">
                <input
                  type="text"
                  id="name-3"
                  name="name-3"
                  data-name="Name 3"
                  maxlength="256"
                  class="text-field-5 w-input"
                >
              </form>
              <div class="w-form-done"></div>
              <div class="w-form-fail"></div>
            </div>
            <a href="#" class="uploadbutton w-button">UPLOAD</a>
            <a href="#" class="uploadbutton w-button">VORSCHAU</a>
            <a href="#" class="uploadbutton w-button">UPLOAD</a>
          </div>
          <div class="uploaddiv">
            <div class="uploadtext">Lösung:</div>
            <div class="form-block-6 w-form">
              <form id="email-form-3" name="email-form-3" data-name="Email Form 3">
                <input
                  type="text"
                  id="name-3"
                  name="name-3"
                  data-name="Name 3"
                  maxlength="256"
                  class="text-field-5 w-input"
                >
              </form>
              <div class="w-form-done"></div>
              <div class="w-form-fail"></div>
            </div>
            <a href="#" class="uploadbutton w-button">UPLOAD</a>
            <a href="#" class="uploadbutton w-button">VORSCHAU</a>
            <a href="#" class="uploadbutton w-button">UPLOAD</a>
          </div>
          <div class="uploaddiv">
            <div class="uploadtext">Transkript:</div>
            <div class="form-block-6 w-form">
              <form id="email-form-3" name="email-form-3" data-name="Email Form 3">
                <input
                  type="text"
                  id="name-3"
                  name="name-3"
                  data-name="Name 3"
                  maxlength="256"
                  class="text-field-5 w-input"
                >
              </form>
              <div class="w-form-done"></div>
              <div class="w-form-fail"></div>
            </div>
            <a href="#" class="uploadbutton w-button">UPLOAD</a>
            <a href="#" class="uploadbutton w-button">VORSCHAU</a>
            <a href="#" class="uploadbutton w-button">UPLOAD</a>
          </div>
          <div class="uploaddiv">
            <div class="uploadtext">Audio 1:</div>
            <div class="form-block-6 w-form">
              <form id="email-form-3" name="email-form-3" data-name="Email Form 3">
                <input
                  type="text"
                  id="name-3"
                  name="name-3"
                  data-name="Name 3"
                  maxlength="256"
                  class="text-field-5 w-input"
                >
              </form>
              <div class="w-form-done"></div>
              <div class="w-form-fail"></div>
            </div>
            <a href="#" class="uploadbutton w-button">UPLOAD</a>
            <a href="#" class="uploadbutton w-button">VORSCHAU</a>
            <a href="#" class="uploadbutton w-button">UPLOAD</a>
          </div>
          <div class="uploaddiv">
            <div class="uploadtext">Audio 2:</div>
            <div class="form-block-6 w-form">
              <form id="email-form-3" name="email-form-3" data-name="Email Form 3">
                <input
                  type="text"
                  id="name-3"
                  name="name-3"
                  data-name="Name 3"
                  maxlength="256"
                  class="text-field-5 w-input"
                >
              </form>
              <div class="w-form-done"></div>
              <div class="w-form-fail"></div>
            </div>
            <a href="#" class="uploadbutton w-button">UPLOAD</a>
            <a href="#" class="uploadbutton w-button">VORSCHAU</a>
            <a href="#" class="uploadbutton w-button">UPLOAD</a>
          </div>
          <a href="#" class="overlaybutton w-button">SPEICHERN</a>
        </div>
      </div>
    </div>
    <a @click="hide" href="#" class="closedialogbutton w-button"></a>
  </div>
</template>

<script>
import overlay from "@/components/mixins/overlay.mixin";
export default {
  mixins: [overlay]
};
</script>

<style>
</style>
