<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">

<head>
      <!-- TEMPLATE_HEADER - Used by Every UI Page -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sunshine</title>
<link rel="icon" type="image/x-icon" href="./images/sunshine.ico">

<link href="./assets/css/sunshine.css" rel="stylesheet" />

  <script type="module" crossorigin src="./assets/featured-P9zR5GGd.js"></script>
  <link rel="modulepreload" crossorigin href="./assets/createLucideIcon-mjjtyxlm.js">
  <link rel="modulepreload" crossorigin href="./assets/Notification-CBHXi2s1.js">
  <link rel="modulepreload" crossorigin href="./assets/Navbar-BpjUb_C-.js">
  <link rel="modulepreload" crossorigin href="./assets/SimpleIcon-BGMhT-IK.js">
  <link rel="modulepreload" crossorigin href="./assets/monitor-DGvs6yC0.js">
  <link rel="modulepreload" crossorigin href="./assets/gamepad-2-DxOHyImA.js">
  <link rel="stylesheet" crossorigin href="./assets/createLucideIcon-BL5QWnkG.css">
  <link rel="stylesheet" crossorigin href="./assets/Notification-HRffB8HQ.css">
  <link rel="stylesheet" crossorigin href="./assets/Navbar-vHSgVmbh.css">
</head>

<body id="app" v-cloak>
  <Navbar></Navbar>
  <div class="container">
    <div class="my-4">
      <h1>{{ $t('featured.title') }}</h1>
      <p>{{ $t('featured.description') }}</p>
    </div>

    <!-- Category Filter -->
    <div class="mb-4">
      <div class="btn-group" role="group" aria-label="Category filter">
        <button
          type="button"
          class="btn btn-outline-primary"
          :class="{ active: selectedCategory === null }"
          @click="selectedCategory = null">
          {{ $t('_common.all') }}
        </button>
        <button
          v-for="category in categories"
          :key="category.id"
          type="button"
          class="btn btn-outline-primary"
          :class="{ active: selectedCategory === category.id }"
          @click="selectedCategory = category.id">
          {{ $t(`featured.categories.${category.originalId}`) }}
        </button>
      </div>
    </div>

    <!-- Loading State -->
    <div v-if="loading" class="text-center py-5">
      <div class="spinner-border" role="status">
        <span class="visually-hidden">{{ $t('_common.loading') }}</span>
      </div>
    </div>

    <!-- Error State -->
    <div v-else-if="error" class="alert alert-danger" role="alert">
      <h4 class="alert-heading">{{ $t('_common.error') }}</h4>
      <p>{{ error }}</p>
    </div>

    <!-- Apps Grid -->
    <div v-else class="row g-4">
      <div
        v-for="app in filteredApps"
        :key="app.id"
        class="col-12 col-md-6 col-lg-4">
        <div class="card h-100 featured-app-card">
          <div class="card-body">
            <div class="d-flex align-items-start mb-3">
              <div class="featured-app-icon me-3">
                <img
                  v-if="app.icon"
                  :src="app.icon + '?size=64'"
                  :alt="app.name"
                  class="rounded"
                  @error="handleIconError($event)"
                />
                <div v-else class="featured-app-icon-placeholder">
                  <box :size="32" class="icon"></box>
                </div>
              </div>
              <div class="flex-grow-1 min-w-0">
                <h5 class="card-title mb-1">{{ app.name }}</h5>
                <p class="text-muted small mb-0" v-if="app.tagline">{{ app.tagline }}</p>
              </div>
              <span v-if="app.official" class="badge bg-primary flex-shrink-0 ms-2">{{ $t('featured.official') }}</span>
            </div>

            <p class="card-text text-muted small mb-3">{{ app.description }}</p>

            <!-- GitHub Metadata -->
            <div v-if="app.github" class="github-stats mb-3 d-flex gap-3 text-muted small">
              <span v-if="app.github.stars !== undefined" :title="$t('featured.github_stars')">
                <star :size="14" class="icon" fill="currentColor"></star>
                {{ formatNumber(app.github.stars) }}
              </span>
              <span v-if="app.github.forks !== undefined" :title="$t('featured.github_forks')">
                <git-fork :size="14" class="icon"></git-fork>
                {{ formatNumber(app.github.forks) }}
              </span>
              <span v-if="app.github.openIssues !== undefined" :title="$t('featured.github_issues')">
                <circle-dot :size="14" class="icon"></circle-dot>
                {{ formatNumber(app.github.openIssues) }}
              </span>
            </div>

            <!-- Last Updated -->
            <div v-if="app.github && app.github.lastUpdated" class="text-muted small mb-3">
              <span :title="formatDate(app.github.lastUpdated).absolute">
                {{ $t('featured.last_updated') }}: {{ formatDate(app.github.lastUpdated).relative }}
              </span>
            </div>

            <!-- Screenshots Section -->
            <div v-if="app.screenshots && app.screenshots.length > 0" class="screenshots-container mb-3">
              <div class="screenshots-scroll">
                <img
                  v-for="(screenshot, index) in app.screenshots"
                  :key="index"
                  :src="screenshot"
                  :alt="app.name + ' screenshot ' + (index + 1)"
                  class="screenshot-thumbnail"
                  @click="openScreenshot(screenshot, app.screenshots)"
                  @error="handleScreenshotError"
                />
              </div>
            </div>

            <!-- Platform Icons -->
            <div class="mb-3">
              <span class="badge bg-secondary me-1" v-for="platform in app.platforms" :key="platform">
                <smartphone v-if="platform === 'android'" :size="14" class="icon"></smartphone>
                <gamepad2 v-else-if="platform === 'console'" :size="14" class="icon"></gamepad2>
                <gamepad v-else-if="platform === 'handheld'" :size="14" class="icon"></gamepad>
                <smartphone v-else-if="platform === 'ios'" :size="14" class="icon"></smartphone>
                <monitor v-else-if="platform === 'linux'" :size="14" class="icon"></monitor>
                <monitor v-else-if="platform === 'macos'" :size="14" class="icon"></monitor>
                <tv v-else-if="platform === 'tv'" :size="14" class="icon"></tv>
                <globe v-else-if="platform === 'web'" :size="14" class="icon"></globe>
                <monitor v-else-if="platform === 'windows'" :size="14" class="icon"></monitor>
                {{ platformName(platform) }}
              </span>
            </div>

            <!-- Action Buttons -->
            <div class="d-flex gap-2 flex-wrap">
              <a
                v-if="app.links && app.links.download"
                :href="app.links.download"
                target="_blank"
                rel="noopener noreferrer"
                class="btn btn-primary btn-sm flex-fill">
                <arrow-down-circle :size="16" class="icon"></arrow-down-circle>
                {{ $t('featured.get') }}
              </a>
              <a
                v-if="app.links && app.links.documentation"
                :href="app.links.documentation"
                target="_blank"
                rel="noopener noreferrer"
                class="btn btn-outline-primary btn-sm"
                :title="$t('featured.documentation')">
                <external-link :size="16" class="icon"></external-link>
                {{ $t('featured.docs') }}
              </a>
              <a
                v-if="app.links && app.links.website"
                :href="app.links.website"
                target="_blank"
                rel="noopener noreferrer"
                class="btn btn-outline-secondary btn-sm"
                :title="$t('featured.website')">
                <external-link :size="16" class="icon"></external-link>
              </a>
              <a
                v-if="app.links && app.links.github"
                :href="app.links.github"
                target="_blank"
                rel="noopener noreferrer"
                class="btn btn-outline-secondary btn-sm"
                :title="$t('featured.github')">
                <simple-icon icon="GitHub" :size="16" class="icon"></simple-icon>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Empty State -->
    <div v-if="!loading && !error && filteredApps.length === 0" class="text-center py-5">
      <p class="text-muted">{{ $t('featured.no_apps') }}</p>
    </div>

    <!-- Screenshot Modal -->
    <div
      v-if="selectedScreenshot"
      class="screenshot-modal"
      @click="closeScreenshot"
      @touchstart="handleTouchStart"
      @touchend="handleTouchEnd">
      <div class="screenshot-modal-content">
        <button
          type="button"
          class="btn-close btn-close-white screenshot-close"
          @click="closeScreenshot"
          aria-label="Close"></button>

        <!-- Previous Button -->
        <button
          v-if="currentAppScreenshots.length > 1"
          type="button"
          class="screenshot-nav screenshot-nav-prev"
          @click.stop="prevScreenshot"
          aria-label="Previous screenshot">
          <chevron-left :size="32"></chevron-left>
        </button>

        <!-- Next Button -->
        <button
          v-if="currentAppScreenshots.length > 1"
          type="button"
          class="screenshot-nav screenshot-nav-next"
          @click.stop="nextScreenshot"
          aria-label="Next screenshot">
          <chevron-right :size="32"></chevron-right>
        </button>

        <!-- Screenshot Counter -->
        <div v-if="currentAppScreenshots.length > 1" class="screenshot-counter">
          {{ selectedScreenshotIndex + 1 }} / {{ currentAppScreenshots.length }}
        </div>

        <img :src="selectedScreenshot" alt="Screenshot" @click.stop />
      </div>
    </div>
  </div>
</body>



</html>
