{{ define "content" -}}
<div class="container py-5">
  <div class="row align-items-center g-5">
    <div class="col-lg-7">
      <h1 class="display-5 fw-bold">{{ t .Lang "home.title" }}</h1>
      <p class="lead text-muted mt-3">{{ t .Lang "home.subtitle" }}</p>

      <div class="mt-4 d-flex flex-wrap gap-2">
        {{ if .User }}
        <a class="btn btn-primary btn-lg" href="/web/{{ .User.Role }}-dashboard">
          {{ t .Lang "home.dashboard" }}
        </a>
        {{ else }}
        <a class="btn btn-primary btn-lg" href="/auth/login">
          <i class="bi bi-google"></i> {{ t .Lang "home.login" }}
        </a>
        {{ end }}
        <a class="btn btn-outline-secondary btn-lg" href="/reading-center">
          {{ t .Lang "nav.reading" }}
        </a>
      </div>

      <div class="mt-4">
        <button class="btn btn-sm btn-outline-primary"
          hx-get="/api/ping" hx-target="#ping-result" hx-swap="innerHTML">
          HTMX: ping
        </button>
        <span id="ping-result" class="ms-2 small text-muted"></span>
      </div>
    </div>

    <div class="col-lg-5">
      <div class="card shadow-sm" id="role-card">
        <div class="card-header bg-primary text-white">Vue 3 widget</div>
        <div class="card-body">
          <ul class="list-unstyled mb-0">
            <li v-for="role in roles" :key="role" class="py-1 border-bottom">
              <i class="bi bi-shield-check me-2 text-success"></i>
              <span v-text="role"></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{{- end }}