<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Мои приложения</title>

  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Google Fonts: Inter -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />

  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'ui-sans-serif', 'system-ui'],
          },
          colors: {
            brand: {
              50:  '#EFF6FF',
              100: '#DBEAFE',
              500: '#3B82F6',
              600: '#2563EB',
            },
          },
        },
      },
    }
  </script>

  <style>
    body {
      font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
      background-color: #F8FAFC;
    }

    /* Карточка: hover-эффект */
    .app-card {
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      border: 2px solid transparent;
    }
    .app-card:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 12px 32px rgba(59, 130, 246, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
      border-color: #3B82F6;
    }

    /* Аватарка */
    .app-avatar {
      border-radius: 16px;
      width: 80px;
      height: 80px;
      font-size: 36px;
      line-height: 1;
    }
  </style>
</head>

<body class="min-h-screen py-12 px-4">

  <!-- Header -->
  <header class="text-center mb-12">
    <h1 class="text-3xl font-bold text-slate-900 tracking-tight">Мои приложения</h1>
    <p class="mt-2 text-slate-500 text-sm font-medium">
      {{ count }} активн{{ 'ое' if count == 1 else ('ых' if 2 <= count <= 4 else 'ых') }} приложени{{ 'е' if count == 1 else ('я' if 2 <= count <= 4 else 'й') }}
    </p>
  </header>

  <!-- Grid -->
  <main class="max-w-5xl mx-auto">
    {% if apps %}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      {% for app in apps %}
      <a
        href="{{ app.url }}"
        class="app-card bg-white rounded-2xl shadow-sm p-6 flex flex-col items-center text-center cursor-pointer no-underline"
        title="{{ app.name }}"
      >
        <!-- Avatar (CSS gradient + icon) -->
        <div
          class="app-avatar mb-4 flex items-center justify-center text-4xl rounded-2xl shadow-lg select-none"
          style="background: {{ app.gradient }};"
        >
          {{ app.icon if app.icon else app.name[0] }}
        </div>

        <!-- Name -->
        <h2 class="text-slate-900 font-semibold text-base leading-snug mb-1">{{ app.name }}</h2>

        <!-- Description -->
        <p class="text-slate-500 text-sm leading-relaxed line-clamp-2">{{ app.description }}</p>
      </a>
      {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-24">
      <p class="text-slate-400 text-lg">Нет доступных приложений.</p>
      <p class="text-slate-400 text-sm mt-2">Добавьте приложения в <code class="bg-slate-100 px-1 rounded">config/apps.json</code></p>
    </div>
    {% endif %}
  </main>

  <!-- Footer -->
  <footer class="text-center mt-16 text-slate-400 text-xs">
    <p>apps.mva154.duckdns.org</p>
  </footer>

</body>
</html>
