<template>
  <div v-if="show" class="overlaydiv">
    <div class="overlaycontentdiv modul">
      <div class="overlayheader">FERTIGKEIT</div>
      <div class="div-block-2">
        <div class="text-block-6 withspace">Bezeichnung:&nbsp;</div>
        <div class="form-block-3 w-form">
          <form id="email-form" name="email-form" data-name="Email Form">
            <input
              type="text"
              id="name-3"
              name="name-3"
              data-name="Name 3"
              maxlength="256"
              class="text-field-2 w-input"
            >
          </form>
          <div class="w-form-done"></div>
          <div class="w-form-fail"></div>
        </div>
      </div>
      <div class="div-block-2 top nopadding">
        <div class="text-block-6 withspace">Bezeichnung:&nbsp;</div>
        <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>
      <a href="#" class="overlaybutton withbuttompadding w-button">HINZUFÜGEN</a>
      <div class="assignmentdiv">
        <div class="assignmentbuttonheader">
          <div class="text-block-7">FERTIGKEITEN</div>
          <a href="#" class="w-inline-block">
            <img src="images/play-button_1.png" alt>
          </a>
        </div>
        <div class="assignmentbody">
          <div class="draganddropcolumn">
            <div class="dragtext">Algebra</div>
            <div class="dragtext secondlayer">Lineare Algebra</div>
            <div class="dragtext secondlayer">Ungleichungen</div>
            <div class="dragtext">Lesen</div>
            <div class="dragtext">Hören</div>
            <div class="dragtext">Schreiben</div>
            <div class="dragtext">Geometrie</div>
            <div class="dragtext secondlayer">Dreiecke</div>
            <div class="dragtext thirdlayer">Gleichseitige Dreiecke</div>
            <div class="dragtext secondlayer">Vierecke</div>
            <div class="dragtext thirdlayer">Quadrate</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>
