<template>
  <div v-if="show" class="overlaydiv">
    <div class="overlaycontentdiv">
      <div class="overlayheader">SCHULTYP</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="w-row">
        <div class="column-5 w-col w-col-6">
          <div class="assignmentdiv">
            <div class="assignmentheader">KOMPETENZMODULE</div>
            <div class="assignmentbody">
              <div class="assignmentcolumn">
                <div class="assignmentcolumnheader">Verfügbar</div>
                <div class="assignmentcolumnscrolldiv">
                  <div class="assignmentcolumncontent">
                    <div class="assignmentcontenttext">1. Klasse</div>
                    <div class="assignmentcontenttext">2. Klasse</div>
                    <div class="assignmentcontenttext">3. Klasse</div>
                    <div class="assignmentcontenttext">4. Klasse</div>
                    <div class="assignmentcontenttext">Jahrgang 1</div>
                    <div class="assignmentcontenttext">Jahrgang 2</div>
                    <div class="assignmentcontenttext">Jahrgang 3</div>
                    <div class="assignmentcontenttext">Jahrgang 4</div>
                    <div class="assignmentcontenttext">Jahrgang 5</div>
                    <div class="assignmentcontenttext">Modul 1</div>
                    <div class="assignmentcontenttext">Modul 2</div>
                    <div class="assignmentcontenttext">Modul 3</div>
                    <div class="assignmentcontenttext">Modul 4</div>
                    <div class="assignmentcontenttext">Modul 5</div>
                    <div class="assignmentcontenttext">Modul 7</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">
                <div class="assignmentcolumnheader">Zugeordnet</div>
                <div class="assignmentcolumnscrolldiv">
                  <div class="assignmentcolumncontent">
                    <div class="assignmentcontenttext">Modul 8</div>
                    <div class="assignmentcontenttext">Modul 9</div>
                    <div class="assignmentcontenttext">Modul 10</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="column-6 w-col w-col-6">
          <div class="assignmentdiv">
            <div class="assignmentheader">FÄCHER</div>
            <div class="assignmentbody">
              <div class="assignmentcolumn">
                <div class="assignmentcolumnheader">Verfügbar</div>
                <div class="assignmentcolumnscrolldiv">
                  <div class="assignmentcolumncontent">
                    <div class="assignmentcontenttext">Latein</div>
                    <div class="assignmentcontenttext">Geschichte</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">
                <div class="assignmentcolumnheader">Zugeordnet</div>
                <div class="assignmentcolumnscrolldiv">
                  <div class="assignmentcolumncontent">
                    <div class="assignmentcontenttext">Deutsch</div>
                    <div class="assignmentcontenttext">Englisch</div>
                    <div class="assignmentcontenttext">Mathematik</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="overlaybutton w-button">SPEICHERN</a>
    </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>
