<template>
  <MainTemplate title="Kalender-Erklärung - WebCal Kalendar einbinden" :showBack="false">
    <template #headerInsert>
      <RouterLink
        :to="{
          name: 'public-calendar',
        }"
        class="mid:hidden text-primary"
      >
        zum Kalender
      </RouterLink>
    </template>
    <template #main>
      <div class="instruction">
        <h2>iOS: Webcal-Link einbinden</h2>
        <ol>
          <li>Öffne die <strong>"Einstellungen"</strong> auf deinem iPhone oder iPad.</li>
          <li>Scrolle nach unten und wähle <strong>"Kalender"</strong>.</li>
          <li>Tippe auf <strong>"Accounts"</strong> und dann auf <strong>"Account hinzufügen"</strong>.</li>
          <li>Wähle <strong>"Andere"</strong> und anschließend <strong>"Kalender abonnieren"</strong>.</li>
          <li>Gib den <strong>Webcal-Link</strong> in das Feld ein und tippe auf <strong>"Weiter"</strong>.</li>
          <li>Der Kalender wird nun hinzugefügt und im Standard-Kalender angezeigt.</li>
        </ol>
        <!-- <img src="images/ios_calendar_step1.png" alt="iOS Kalender Einstellungen" /> -->
        <!-- <img src="images/ios_calendar_step2.png" alt="Webcal-Link eingeben" /> -->
      </div>
      <br />
      <div class="instruction">
        <h2>Android: Webcal-Link einbinden</h2>
        <p>
          Auf Android-Geräten musst du den Webcal-Link über den Google Kalender hinzufügen, da es keine direkte Option
          gibt:
        </p>
        <ol>
          <li>
            Öffne auf einem Computer oder im Browser den
            <strong> <a href="https://calendar.google.com" target="_blank">Google Kalender</a> </strong>.
          </li>
          <li>Klicke auf das <strong>"+"-Symbol</strong> neben "Weitere Kalender" (links im Menü).</li>
          <li>Wähle <strong>"Per URL"</strong> aus.</li>
          <li>Gib den <strong>Webcal-Link</strong> ein und klicke auf <strong>"Kalender hinzufügen"</strong>.</li>
          <li>Öffne die Google Kalender App auf deinem Android-Gerät und synchronisiere die Änderungen.</li>
        </ol>
        <!-- <img src="images/android_google_calendar_step1.png" alt="Google Kalender im Browser" /> -->
        <!-- <img src="images/android_google_calendar_step2.png" alt="Webcal-Link einfügen" /> -->
      </div>

      <div class="instruction">
        <h2>Hinweise</h2>
        <ul>
          <li>Der Webcal-Link muss korrekt formatiert sein (beginnt mit <strong>webcal://</strong>).</li>
          <li>Wenn der Kalender nicht sofort angezeigt wird, überprüfe die Synchronisierungseinstellungen.</li>
          <li>Für Android kann es hilfreich sein, die Google Kalender App zu aktualisieren.</li>
        </ul>
      </div>
    </template>
  </MainTemplate>
</template>

<script setup lang="ts">
import MainTemplate from "@/templates/Main.vue";
</script>
