{{template "base" .}}

{{define "title"}}{{.Name}} - Details{{end}}

{{define "styles"}}
<style>
  .game-cover {
    max-height: 400px;
    object-fit: cover;
  }

  .screenshot-gallery {
    height: 600px;
  }

  .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .info-label {
    font-weight: bold;
    color: #666;
  }

  .download-card {
    transition: transform 0.2s;
  }

  .download-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    margin: 0.25rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    font-size: 0.875rem;
  }
</style>
{{end}}

{{define "content"}}
<!-- Game Details -->
<div class="container py-4">
  <!-- Basic Info -->
  <div class="row mb-4">
    <div class="col-md-4">
      {{if .Cover}}
      <img src="{{.Cover}}" class="img-fluid rounded game-cover" alt="{{.Name}}" />
      {{else}}
      <div class="game-cover bg-secondary d-flex align-items-center justify-content-center rounded">
        <span class="text-white">No Image</span>
      </div>
      {{end}}
    </div>
    <div class="col-md-8">
      <h1 class="mb-3">{{.Name}}</h1>

      {{if .Aliases}}
      <div>
        <span class="info-label">Aliases:</span>
        {{range .Aliases}}
        <span class="tag">{{.}}</span>
        {{end}}
      </div>
      {{end}}

      <div>
        <span class="info-label">Developers:</span>
        {{range .Developers}}
        <span class="tag">{{.}}</span>
        {{end}}
      </div>

      <div>
        <span class="info-label">Publishers:</span>
        {{range .Publishers}}
        <span class="tag">{{.}}</span>
        {{end}}
      </div>

      {{if .Languages}}
      <div>
        <span class="info-label">Languages:</span>
        {{range .Languages}}
        <span class="tag">{{.}}</span>
        {{end}}
      </div>
      {{end}} {{if .Description}}
      <div>
        <p>{{.Description}}</p>
      </div>
      {{end}} {{if .SteamID}}
      <div>
        <a href="https://store.steampowered.com/app/{{.SteamID}}" target="_blank" class="btn btn-primary">
          Steam
        </a>
      </div>
      {{end}}
    </div>
  </div>

  <!-- Screenshots -->
  {{if .Screenshots}}
  <div class="mb-4">
    <div class="swiper screenshot-gallery">
      <div class="swiper-wrapper">
        {{range .Screenshots}}
        <div class="swiper-slide">
          <img src="{{.}}" alt="screenshot" />
        </div>
        {{end}}
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </div>
  {{end}}

  <!-- Download Links -->
  {{if .Games}}
  <div class="mb-4">
    <h3 class="mb-3">Download</h3>
    <div class="row g-4">
      {{range .Games}}
      <div class="col-md-6">
        <div class="card download-card">
          <div class="card-body">
            <h5 class="card-title">{{.RawName}}</h5>
            {{if .Size}}
            <div class="card-text">
              <small class="text-muted">Size: {{.Size}}</small>
            </div>
            {{end}}
            {{if .Author}}
            <div class="card-text">
              <small class="text-muted">Source: {{.Author}}</small>
            </div>
            {{end}}
            {{if .Platform}}
            <div class="card-text">
              <small class="text-muted">Platform: {{.Platform}}</small>
            </div>
            {{end}}
            {{if .Password}}
            <div class="card-text">
              <small class="text-muted">Unzip password: <code>{{.Password}}</code></small>
            </div>
            {{end}}
            {{if .UpdatedAt}}
            <div class="card-text">
              <small class="text-muted">Updated: {{.UpdatedAt}}</small>
            </div>
            {{end}}
            <div class="mt-2 d-flex justify-content-between align-items-center">
              <div class="input-group" style="max-width: 300px;">
                <input type="text" class="form-control form-control-sm" value="{{.Download}}" readonly>
                <button class="btn btn-outline-secondary btn-sm" type="button"
                  onclick="copyToClipboard(this.previousElementSibling)">
                  Copy
                </button>
              </div>
              <a href="{{.Url}}" class="btn btn-outline-primary" target="_blank">Source Page</a>
            </div>
          </div>
        </div>
      </div>
      {{end}}
    </div>
  </div>
  {{end}}
</div>
{{end}}

{{define "scripts"}}
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
  const swiper = new Swiper(".screenshot-gallery", {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

  function copyToClipboard(input) {
    input.select();
    input.setSelectionRange(0, 99999);

    navigator.clipboard.writeText(input.value).then(() => {
      const button = input.nextElementSibling;
      const originalText = button.textContent;
      button.textContent = 'Copied';
      button.classList.remove('btn-outline-secondary');
      button.classList.add('btn-success');

      setTimeout(() => {
        button.textContent = originalText;
        button.classList.remove('btn-success');
        button.classList.add('btn-outline-secondary');
      }, 1500);
    }).catch(err => {
      console.error('Failed to copy:', err);
    });
  }
</script>
{{end}}