Toju/website/src/app/pages/downloads/downloads.component.html

<div class="min-h-screen pt-32 pb-20">
  <section class="container mx-auto px-6 mb-16">
    <div class="max-w-3xl mx-auto text-center">
      <h1 class="text-4xl md:text-6xl font-extrabold text-foreground mb-6">{{ 'pages.downloads.hero.titlePrefix' | translate }} <span class="gradient-text">{{ 'common.brand' | translate }}</span></h1>
      <p class="text-lg text-muted-foreground leading-relaxed">
        {{ 'pages.downloads.hero.description' | translate }}
      </p>
    </div>
  </section>

  <!-- Recommended Download -->
  @if (latestRelease()) {
    <section class="container mx-auto px-6 mb-16">
      <div class="max-w-2xl mx-auto section-fade">
        <div
          class="rounded-2xl border border-purple-500/20 bg-gradient-to-br from-purple-950/20 to-violet-950/20 backdrop-blur-sm p-8 md:p-10 text-center"
        >
          <div
            class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-sm font-medium mb-4"
          >
            {{ 'pages.downloads.recommended.badge' | translate }}
          </div>
          <h2 class="text-2xl font-bold text-foreground mb-2">{{ 'pages.downloads.recommended.title' | translate:{ os: getDetectedOsLabel() } }}</h2>
          <p class="text-muted-foreground mb-6">{{ 'pages.downloads.recommended.version' | translate:{ version: latestRelease()!.tag_name } }}</p>

          @if (recommendedUrl()) {
            <a
              [href]="recommendedUrl()"
              class="inline-flex items-center gap-3 px-8 py-4 rounded-xl bg-gradient-to-r from-purple-600 to-violet-600 text-white font-semibold text-lg hover:from-purple-500 hover:to-violet-500 transition-all shadow-2xl shadow-purple-500/25 hover:shadow-purple-500/40"
            >
              <svg
                class="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                />
              </svg>
              {{ 'common.actions.downloadFor' | translate:{ os: getDetectedOsLabel() } }}
            </a>
          }

          <p class="text-xs text-muted-foreground/60 mt-4">
            {{ 'pages.downloads.recommended.webVersionPrefix' | translate }}
            <a
              href="https://web.toju.app/"
              target="_blank"
              rel="noopener"
              class="underline hover:text-muted-foreground transition-colors"
            >
              {{ 'pages.downloads.recommended.webVersionLink' | translate }}
            </a>
            {{ 'pages.downloads.recommended.webVersionSuffix' | translate }}
          </p>
        </div>
      </div>
    </section>
  }

  <app-ad-slot />

  <!-- All Downloads for Latest Release -->
  @if (latestRelease(); as release) {
    <section class="container mx-auto px-6 mb-20">
      <div class="max-w-4xl mx-auto">
        <h2 class="text-2xl font-bold text-foreground mb-8 section-fade">
          {{ 'pages.downloads.allPlatforms.title' | translate }} <span class="text-muted-foreground font-normal text-lg">- {{ release.tag_name }}</span>
        </h2>

        <div class="grid gap-3 section-fade">
          @for (asset of release.assets; track asset.name) {
            @if (!isMetaFile(asset.name)) {
              <a
                [href]="asset.browser_download_url"
                class="group flex items-center justify-between gap-4 rounded-xl border border-border/30 bg-card/30 backdrop-blur-sm p-5 hover:border-purple-500/30 hover:bg-card/50 transition-all"
              >
                <div class="flex items-center gap-4">
                  <div class="w-10 h-10 rounded-lg bg-secondary flex items-center justify-center text-lg">
                    @if (getOsIcon(asset.name)) {
                      <img
                        [src]="getOsIcon(asset.name)"
                        [attr.alt]="'pages.downloads.allPlatforms.assetIconAlt' | translate:{ os: getAssetOSLabel(asset.name) }"
                        width="32"
                        height="32"
                        class="w-8 h-8 object-contain invert"
                      />
                    }
                  </div>
                  <div>
                    <p class="text-sm font-medium text-foreground group-hover:text-purple-400 transition-colors">{{ asset.name }}</p>
                    <p class="text-xs text-muted-foreground">
                      {{ getAssetOSLabel(asset.name) }} · {{ releaseService.formatBytes(asset.size) }}
                    </p>
                  </div>
                </div>
                <svg
                  class="w-5 h-5 text-muted-foreground group-hover:text-purple-400 transition-colors"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                  />
                </svg>
              </a>
            }
          }
        </div>
      </div>
    </section>
  }

  <!-- Historical Releases -->
  @if (releases().length > 1) {
    <section class="container mx-auto px-6 mb-20">
      <div class="max-w-4xl mx-auto">
        <h2 class="text-2xl font-bold text-foreground mb-8 section-fade">{{ 'pages.downloads.previousReleases.title' | translate }}</h2>

        <div class="space-y-4 section-fade">
          @for (release of releases().slice(1); track release.tag_name) {
            <details class="group rounded-xl border border-border/30 bg-card/30 backdrop-blur-sm overflow-hidden">
              <summary class="flex items-center justify-between gap-4 p-5 cursor-pointer hover:bg-card/50 transition-colors list-none">
                <div class="flex items-center gap-4">
                  <div class="w-8 h-8 rounded-lg bg-secondary flex items-center justify-center">
                    <svg
                      class="w-4 h-4 text-muted-foreground"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
                      />
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium text-foreground">{{ release.name || release.tag_name }}</p>
                    <p class="text-xs text-muted-foreground">{{ formatDate(release.published_at) }} · {{ 'pages.downloads.previousReleases.fileCount' | translate:{ count: release.assets.length } }}</p>
                  </div>
                </div>
                <svg
                  class="w-4 h-4 text-muted-foreground group-open:rotate-180 transition-transform"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </summary>
              <div class="px-5 pb-5 space-y-2">
                @if (release.body) {
                  <div class="text-sm text-muted-foreground mb-4 whitespace-pre-line border-b border-border/20 pb-4">{{ release.body }}</div>
                }
                @for (asset of release.assets; track asset.name) {
                  @if (!isMetaFile(asset.name) && !asset.name.toLowerCase().includes('server')) {
                    <a
                      [href]="asset.browser_download_url"
                      class="group/item flex items-center justify-between gap-4 rounded-lg border border-border/20 bg-background/50 p-3 hover:border-purple-500/30 transition-all"
                    >
                      <div class="flex items-center gap-3">
                        @if (getOsIcon(asset.name)) {
                          <img
                            [src]="getOsIcon(asset.name)"
                            [attr.alt]="'pages.downloads.allPlatforms.assetIconAlt' | translate:{ os: getAssetOSLabel(asset.name) }"
                            width="16"
                            height="16"
                            class="w-4 h-4 object-contain mr-1 invert"
                          />
                        }
                        <div>
                          <p class="text-xs font-medium text-foreground group-hover/item:text-purple-400 transition-colors">{{ asset.name }}</p>
                          <p class="text-xs text-muted-foreground">{{ releaseService.formatBytes(asset.size) }}</p>
                        </div>
                      </div>
                      <svg
                        class="w-4 h-4 text-muted-foreground"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                        />
                      </svg>
                    </a>
                  }
                }
              </div>
            </details>
          }
        </div>
      </div>
    </section>
  }

  <!-- Loading state -->
  @if (loading()) {
    <div class="container mx-auto px-6 text-center py-20">
      <div class="inline-flex items-center gap-3 text-muted-foreground">
        <svg
          class="w-5 h-5 animate-spin"
          fill="none"
          viewBox="0 0 24 24"
        >
          <circle
            class="opacity-25"
            cx="12"
            cy="12"
            r="10"
            stroke="currentColor"
            stroke-width="4"
          ></circle>
          <path
            class="opacity-75"
            fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
          ></path>
        </svg>
        {{ 'pages.downloads.loading' | translate }}
      </div>
    </div>
  }

  <!-- RSS Feed link -->
  <section class="container mx-auto px-6">
    <div class="max-w-4xl mx-auto text-center section-fade">
      <p class="text-sm text-muted-foreground">
        <svg
          class="w-4 h-4 inline-block mr-1 -mt-0.5"
          fill="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            d="M6.18 15.64a2.18 2.18 0 012.18 2.18C8.36 19 7.38 20 6.18 20 5 20 4 19 4 17.82a2.18 2.18 0 012.18-2.18M4 4.44A15.56 15.56 0 0119.56 20h-2.83A12.73 12.73 0 004 7.27V4.44m0 5.66a9.9 9.9 0 019.9 9.9h-2.83A7.07 7.07 0 004 12.93V10.1z"
          />
        </svg>
        {{ 'pages.downloads.rss.prefix' | translate }}
        <a
          href="https://git.azaaxin.com/myxelium/Toju/releases.rss"
          target="_blank"
          rel="noopener"
          class="underline hover:text-foreground transition-colors"
        >
          {{ 'pages.downloads.rss.link' | translate }}
        </a>
      </p>
    </div>
  </section>
</div>