<script setup lang="ts">
import { ref } from 'vue'

const showPassword = ref(false)
</script>

<template>
  <v-container fluid class="login-page hoard-page hoard-page--centered">
    <section class="login-shell hoard-panel hoard-shell-grid hoard-panel-gradient">
      <aside class="login-brand">
        <p class="login-kicker hoard-kicker hoard-kicker--wide">Willkommen bei Hoard</p>
        <h1>Anmelden und weiterarbeiten</h1>
        <p class="login-intro">
          Deine Dateiablage bleibt aufgeräumt, schnell und direkt im Browser bedienbar.
        </p>

        <ul class="login-points">
          <li>
            <v-icon icon="mdi-folder-outline" size="18" />
            Ordner und Dateien zentral verwalten
          </li>
          <li>
            <v-icon icon="mdi-file-document-edit-outline" size="18" />
            Markdown-Dateien sofort bearbeiten
          </li>
          <li>
            <v-icon icon="mdi-image-outline" size="18" />
            Bilder und PDFs direkt als Vorschau ansehen
          </li>
        </ul>
      </aside>

      <v-form class="login-form hoard-panel" @submit.prevent>
        <div class="form-head">
          <h2>Login</h2>
          <p>Melde dich mit deinem bestehenden Konto an.</p>
        </div>

        <v-text-field
          label="E-Mail"
          type="email"
          variant="outlined"
          prepend-inner-icon="mdi-email-outline"
          autocomplete="email"
          required
        />

        <v-text-field
          label="Passwort"
          :type="showPassword ? 'text' : 'password'"
          variant="outlined"
          prepend-inner-icon="mdi-lock-outline"
          :append-inner-icon="showPassword ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
          autocomplete="current-password"
          required
          @click:append-inner="showPassword = !showPassword"
        />

        <div class="form-meta">
          <v-checkbox hide-details color="primary" density="compact" label="Angemeldet bleiben" />
          <v-btn variant="text" size="small">Passwort vergessen?</v-btn>
        </div>

        <v-btn type="submit" color="primary" block size="large" prepend-icon="mdi-login">Anmelden</v-btn>

        <v-btn variant="outlined" block to="/" prepend-icon="mdi-home">Zur Startseite</v-btn>
      </v-form>
    </section>
  </v-container>
</template>

<style scoped>
.login-shell {
  --hoard-shell-width: 1040px;
  --hoard-gradient-angle: 115deg;
  --hoard-gradient-start: color-mix(in srgb, var(--color-primary-100) 45%, var(--color-surface) 55%);
  --hoard-gradient-end: var(--color-surface);
  --hoard-gradient-end-stop: 52%;

  grid-template-columns: minmax(280px, 1fr) minmax(320px, 430px);
}

h1 {
  margin-bottom: var(--space-3);
  max-width: 18ch;
  font-size: clamp(1.9rem, 2vw + 1rem, 2.6rem);
  font-weight: 700;
}

.login-intro {
  margin-bottom: var(--space-5);
  max-width: 44ch;
  color: var(--color-text-secondary);
}

.login-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.login-points li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.form-head h2 {
  margin-bottom: var(--space-1);
  font-size: 1.45rem;
}

.form-head p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
}

.form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

@media (width <= 960px) {
  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-form {
    padding: var(--space-5);
  }

  .form-meta {
    flex-wrap: wrap;
  }
}

@media (width <= 600px) {
  h1 {
    max-width: none;
    font-size: clamp(1.55rem, 7vw, 1.95rem);
  }

  .login-intro {
    margin-bottom: var(--space-4);
  }

  .login-points {
    gap: var(--space-2);
  }

  .login-points li {
    align-items: flex-start;
  }

  .login-form {
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .form-meta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  :deep(.form-meta .v-btn) {
    width: 100%;
    min-height: 44px;
  }

  :deep(.login-form .v-btn) {
    min-height: 44px;
  }
}
</style>
