<template>
  <div class="bodydiv">
    <book-overlay :show="showBook" :name="'showBook'" @hide="hideOverlays" @choose="handleChoose"/>
    <chapter-overlay :show="showChapter" :name="'showChapter'" @hide="hideOverlays"/>
    <competence-module-overlay :show="showCompetence" :name="'showCompetence'" @hide="hideOverlays"/>
    <package-overlay :show="showPackage" :name="'showPackage'" @hide="hideOverlays"/>
    <school-type-overlay :show="showSchoolType" :name="'showSchoolType'" @hide="hideOverlays"/>
    <skill-overlay :show="showSkill" :name="'showSkill'" @hide="hideOverlays"/>
    <subject-overlay :show="showSubject" :name="'showSubject'" @hide="hideOverlays"/>
    <task-overlay :show="showTask" :name="'showTask'" @hide="hideOverlays"/>
    <task-type-overlay :show="showTaskType" :name="'showTaskType'" @hide="hideOverlays"/>
    <topic-overlay :show="showTopic" :name="'showTopic'" @hide="hideOverlays"/>
    <div class="containerdiv">
      <div class="navdiv">
        <div class="defaulttext">Mario König</div>
        <div class="defaulttext">|</div>
        <a href="#" class="textlink">Logout</a>
      </div>
      <img
        src="images/5b55d3d0b873dd650618fd83_Veritas_Logo.png"
        srcset="images/5b55d3d0b873dd650618fd83_Veritas_Logo-p-500.png 500w, images/5b55d3d0b873dd650618fd83_Veritas_Logo-p-800.png 800w, images/5b55d3d0b873dd650618fd83_Veritas_Logo-p-1080.png 1080w, images/5b55d3d0b873dd650618fd83_Veritas_Logo-p-1600.png 1600w, images/5b55d3d0b873dd650618fd83_Veritas_Logo.png 1862w"
        sizes="200px"
        alt
        class="image"
      >
      <div data-easing="linear" class="tabs w-tabs">
        <div class="w-tab-menu">
          <a data-w-tab="Tab 1" class="tab-link-tab-1 w-inline-block w-tab-link w--current">
            <div class="text-block-5">GRUNDEINSTELLUNG</div>
          </a>
          <a data-w-tab="Tab 2" class="tab-link-tab-2 w-inline-block w-tab-link">
            <div class="text-block-4">AUFGABEN</div>
          </a>
        </div>
        <div class="tabs-content w-tab-content">
          <div data-w-tab="Tab 1" class="tab-pane-tab-1 w-tab-pane w--tab-active">
            <div class="menudiv">
              <div class="menuitem">
                <div class="form-block w-form">
                  <form id="email-form" name="email-form" data-name="Email Form" class="form">
                    <select id="field" name="field" class="menuitemselect w-select">
                      <option value="Another Choice">Schultypen (3)</option>
                    </select>
                    <a
                      href="#"
                      @click="showSchoolType = true"
                      class="defaultbutton w-button"
                    >Neuer Schultyp</a>
                  </form>
                  <div class="w-form-done"></div>
                  <div class="w-form-fail"></div>
                </div>
              </div>
              <div class="menuitem">
                <div class="form-block w-form">
                  <form id="email-form" name="email-form" data-name="Email Form" class="form">
                    <select
                      id="field-2"
                      name="field-2"
                      data-name="Field 2"
                      class="menuitemselect w-select"
                    >
                      <option value="Another Choice">Kompetenzmodule (13)</option>
                    </select>
                    <a
                      href="#"
                      @click="showCompetence = true"
                      class="defaultbutton w-button"
                    >Neues Kompetenzmodul</a>
                  </form>
                  <div class="w-form-done"></div>
                  <div class="w-form-fail"></div>
                </div>
              </div>
              <div class="menuitem">
                <div class="form-block w-form">
                  <form id="email-form" name="email-form" data-name="Email Form" class="form">
                    <select
                      id="Field-8"
                      name="Field-3"
                      data-name="Field 3"
                      class="menuitemselect w-select"
                    >
                      <option value="Another Choice">Fächer (4)</option>
                    </select>
                    <a
                      href="#"
                      @click="showSubject = true"
                      class="defaultbutton w-button"
                    >Neues Fach</a>
                  </form>
                  <div class="w-form-done"></div>
                  <div class="w-form-fail"></div>
                </div>
              </div>
              <div class="menuitem">
                <div class="form-block w-form">
                  <form id="email-form" name="email-form" data-name="Email Form" class="form">
                    <select
                      id="field-4"
                      name="field-4"
                      data-name="Field 4"
                      class="menuitemselect w-select"
                    >
                      <option value="Another Choice">Aufgabentypen (3)</option>
                    </select>
                    <a
                      href="#"
                      @click="showTaskType = true"
                      class="defaultbutton w-button"
                    >Neuer Aufgabentyp</a>
                  </form>
                  <div class="w-form-done"></div>
                  <div class="w-form-fail"></div>
                </div>
              </div>
              <div class="menuitem">
                <div class="form-block w-form">
                  <form id="email-form" name="email-form" data-name="Email Form" class="form">
                    <select
                      id="Field-10"
                      name="Field-5"
                      data-name="Field 5"
                      class="menuitemselect w-select"
                    >
                      <option value="Another Choice">Bücher (6)</option>
                    </select>
                    <a href="#" @click="showBook = true" class="defaultbutton w-button">Neues Buch</a>
                  </form>
                  <div class="w-form-done"></div>
                  <div class="w-form-fail"></div>
                </div>
              </div>
            </div>
            <div class="datacontentdiv">
              <div class="datacontentcolumn dark">
                <div class="datacontentitem">
                  <div class="text-block-2">HTL</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">HAK</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">HAS</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
              </div>
              <div class="datacontentcolumn dark">
                <div class="datacontentitem">
                  <div class="text-block-2">1. Klasse</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">2. Klasse</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">3. Klasse</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">4. Klasse</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Modul 1</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Modul 2</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Modul 3</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Modul 4</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Modul 5</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Modul 6</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Modul 7</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Modul 8</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Modul 9</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Modul 10</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Modul 11</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Modul 12</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
              </div>
              <div class="datacontentcolumn dark">
                <div class="datacontentitem">
                  <div class="text-block-2">Deutsch</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Englisch</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Mathematik</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Latein</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
              </div>
              <div class="datacontentcolumn dark">
                <div class="datacontentitem">
                  <div class="text-block-2">Lückentext</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Multiple Choice</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">Single Choice</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
              </div>
              <div class="datacontentcolumn dark">
                <div class="datacontentitem">
                  <div class="text-block-2">EIC 5</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">EIC 6</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">EIC 7</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">DSTD. 1 Basis</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
                <div class="datacontentitem">
                  <div class="text-block-2">DSTD. 1 Profi</div>
                  <a href="#" class="w-inline-block">
                    <img src="images/play-button.png" alt>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div data-w-tab="Tab 2" class="tab-pane-tab-2 w-tab-pane">
            <div class="menudiv excercises">
              <div class="menudivheader">AUFGABE</div>
              <div class="menudivheader">AUFGABENTYP</div>
              <div class="menudivheader">FERTIGKEIT</div>
              <div class="menudivheader">KAPITEL</div>
              <div class="menudivheader">MODUL</div>
              <div class="menudivheader">PAKET</div>
              <div class="menudivheader">THEMA</div>
              <div class="menudivheader">BUCH</div>
              <div class="menudivheader">FACH</div>
              <div class="menudivheader">SCHULTYP</div>
            </div>
            <div class="datacontentdiv excercises">
              <div class="excerciseconentrow">
                <img
                  src="images/veritas_status_rot.png"
                  width="12"
                  height="12"
                  alt
                  class="excercisestatusimage"
                >
                <div class="excerciserowtext">Aufgabe 1</div>
                <div class="excerciserowtext">Lückentext</div>
                <div class="excerciserowtext">Lesen</div>
                <div class="excerciserowtext">Unit 1</div>
                <div class="excerciserowtext">1. Jahrgang</div>
                <div class="excerciserowtext">Basis, 1. Auflage</div>
                <div class="excerciserowtext">Familie</div>
                <div class="excerciserowtext">EIC 5</div>
                <div class="excerciserowtext">Englisch</div>
                <div class="excerciserowtext">HTL</div>
              </div>
              <div class="excerciseconentrow">
                <img src="images/veritas_status_rot.png" alt class="excercisestatusimage">
                <div class="excerciserowtext">Aufgabe 1</div>
                <div class="excerciserowtext">Lückentext</div>
                <div class="excerciserowtext">Lesen</div>
                <div class="excerciserowtext">Unit 1</div>
                <div class="excerciserowtext">1. Jahrgang</div>
                <div class="excerciserowtext">Basis, 1. Auflage</div>
                <div class="excerciserowtext">Familie</div>
                <div class="excerciserowtext">EIC 5</div>
                <div class="excerciserowtext">Englisch</div>
                <div class="excerciserowtext">HTL</div>
              </div>
              <div class="excerciseconentrow">
                <img src="images/veritas_status_gruen.png" alt class="excercisestatusimage">
                <div class="excerciserowtext">Aufgabe 1</div>
                <div class="excerciserowtext">Lückentext</div>
                <div class="excerciserowtext">Lesen</div>
                <div class="excerciserowtext">Unit 1</div>
                <div class="excerciserowtext">1. Jahrgang</div>
                <div class="excerciserowtext">Basis, 1. Auflage</div>
                <div class="excerciserowtext">Familie</div>
                <div class="excerciserowtext">EIC 5</div>
                <div class="excerciserowtext">Englisch</div>
                <div class="excerciserowtext">HTL</div>
              </div>
              <div class="excerciseconentrow">
                <img src="images/veritas_status_gruen.png" alt class="excercisestatusimage">
                <div class="excerciserowtext">Aufgabe 1</div>
                <div class="excerciserowtext">Lückentext</div>
                <div class="excerciserowtext">Lesen</div>
                <div class="excerciserowtext">Unit 1</div>
                <div class="excerciserowtext">1. Jahrgang</div>
                <div class="excerciserowtext">Basis, 1. Auflage</div>
                <div class="excerciserowtext">Familie</div>
                <div class="excerciserowtext">EIC 5</div>
                <div class="excerciserowtext">Englisch</div>
                <div class="excerciserowtext">HTL</div>
              </div>
              <div class="excerciseconentrow">
                <img src="images/veritas_status_gruen.png" alt class="excercisestatusimage">
                <div class="excerciserowtext">Aufgabe 1</div>
                <div class="excerciserowtext">Lückentext</div>
                <div class="excerciserowtext">Lesen</div>
                <div class="excerciserowtext">Unit 1</div>
                <div class="excerciserowtext">1. Jahrgang</div>
                <div class="excerciserowtext">Basis, 1. Auflage</div>
                <div class="excerciserowtext">Familie</div>
                <div class="excerciserowtext">EIC 5</div>
                <div class="excerciserowtext">Englisch</div>
                <div class="excerciserowtext">HTL</div>
              </div>
              <div class="excerciseconentrow">
                <img src="images/veritas_status_gelb.png" alt class="excercisestatusimage">
                <div class="excerciserowtext">Aufgabe 1</div>
                <div class="excerciserowtext">Lückentext</div>
                <div class="excerciserowtext">Lesen</div>
                <div class="excerciserowtext">Unit 1</div>
                <div class="excerciserowtext">1. Jahrgang</div>
                <div class="excerciserowtext">Basis, 1. Auflage</div>
                <div class="excerciserowtext">Familie</div>
                <div class="excerciserowtext">EIC 5</div>
                <div class="excerciserowtext">Englisch</div>
                <div class="excerciserowtext">HTL</div>
              </div>
              <div class="newexcercisediv">
                <a
                  href="#"
                  @click="showTask = true"
                  class="defaultbutton large w-button"
                >NEUE AUFGABE</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BookOverlay from "@/components/overlay/Book";
import ChapterOverlay from "@/components/overlay/Chapter";
import CompetenceModuleOverlay from "@/components/overlay/CompetenceModule";
import PackageOverlay from "@/components/overlay/Package";
import SchoolTypeOverlay from "@/components/overlay/SchoolType";
import SkillOverlay from "@/components/overlay/Skill";
import SubjectOverlay from "@/components/overlay/Subject";
import TaskOverlay from "@/components/overlay/Task";
import TaskTypeOverlay from "@/components/overlay/TaskType";
import TopicOverlay from "@/components/overlay/Topic";
export default {
  components: {
    BookOverlay,
    ChapterOverlay,
    CompetenceModuleOverlay,
    PackageOverlay,
    SchoolTypeOverlay,
    SkillOverlay,
    SubjectOverlay,
    TaskOverlay,
    TaskTypeOverlay,
    TopicOverlay
  },
  data() {
    return {
      showBook: false,
      showChapter: false,
      showCompetence: false,
      showPackage: false,
      showSchoolType: false,
      showSkill: false,
      showSubject: false,
      showTask: false,
      showTaskType: false,
      showTopic: false
    };
  },
  methods: {
    hideOverlays(obj) {
      this[obj.name] = false
    },
    handleChoose(event) {
      console.log("DASHY");
      console.log(event);
      if (event.option.action) {
        this[event.option.action] = true;
      }
    }
  }
};
</script>

<style scoped>
</style>
