{% extends "base.html" %}
{% load static %}

{% block title %}Downloads{% endblock %}
{% block meta_description %}Download ViSERA by Tecvico — available for Windows, macOS, and Linux.{% endblock %}

{% block content %}

<section class="page-hero" aria-labelledby="downloads-heading">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
  </div>
  <div class="container">
    <div class="page-hero-content">
      <div class="section-badge">Software</div>
      <h1 class="page-hero-title" id="downloads-heading">Downloads</h1>
      <p class="page-hero-subtitle">Download the latest version of ViSERA for your platform.</p>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="download-platforms-heading">
  <div class="container">
    <h2 class="sr-only" id="download-platforms-heading">Available Platforms</h2>
    <div class="downloads-grid">

      <div class="download-card glass-card fade-in {% if not windows_items %}download-card--unavailable{% endif %}">
        <div class="download-platform-icon" aria-hidden="true">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
            <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/>
          </svg>
        </div>
        <h3 class="download-platform-name">Windows</h3>
        <p class="download-platform-desc">Windows 10 and up (64-bit)</p>
        {% if windows_items %}
          {% for item in windows_items %}
          <div class="download-item">
            <span class="download-version">v{{ item.version }}</span>
            {% if item.description %}<p class="download-item-desc">{{ item.description }}</p>{% endif %}
            {% if item.download_url and item.download_url != '#' %}
            <a href="{{ item.download_url }}" class="btn-primary download-btn" download>
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
                <path d="M9 2V12M9 12L5 8M9 12L13 8M3 15H15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Download
            </a>
            {% endif %}
          </div>
          {% endfor %}
        {% else %}
        <span class="coming-soon-badge">Coming Soon</span>
        {% endif %}
      </div>

      <div class="download-card glass-card fade-in {% if not macos_items %}download-card--unavailable{% endif %}">
        <div class="download-platform-icon" aria-hidden="true">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
            <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
          </svg>
        </div>
        <h3 class="download-platform-name">macOS</h3>
        <p class="download-platform-desc">macOS 11 Big Sur and up</p>
        {% if macos_items %}
          {% for item in macos_items %}
          <div class="download-item">
            <span class="download-version">v{{ item.version }}</span>
            {% if item.description %}<p class="download-item-desc">{{ item.description }}</p>{% endif %}
            {% if item.download_url and item.download_url != '#' %}
            <a href="{{ item.download_url }}" class="btn-primary download-btn" download>
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
                <path d="M9 2V12M9 12L5 8M9 12L13 8M3 15H15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Download
            </a>
            {% endif %}
          </div>
          {% endfor %}
        {% else %}
        <span class="coming-soon-badge">Coming Soon</span>
        {% endif %}
      </div>

      <div class="download-card glass-card fade-in {% if not linux_items %}download-card--unavailable{% endif %}">
        <div class="download-platform-icon" aria-hidden="true">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.EraseINIT.3.337.572.95.23 1.681-.078.277-.21.557-.303.815-.125.35-.169.63-.046.875.315.648 1.086.698 1.728.hyperparameter698.256 0 .504-.034.72-.046.372-.022.626.026.783.17.428.39.405 1.353.504 2.408.096.99.184 2.023.618 2.813.22.391.528.717.938.939.41.22.915.316 1.44.282.52-.033 1.092-.218 1.544-.668.296-.296.522-.723.58-1.226.029-.248.017-.51-.02-.77-.15-1.168.056-2.22.617-2.82.274-.294.548-.452.748-.606.238-.186.427-.41.554-.676.247-.517.194-1.107-.026-1.633-.11-.271-.238-.517-.324-.773-.148-.448-.172-.913.053-1.377.226-.467.67-.876 1.02-1.428a.424.424 0 00.11-.134c.25-.43.31-.915.245-1.395-.065-.476-.245-.937-.49-1.37-.245-.436-.54-.838-.807-1.278-.254-.428-.47-.903-.522-1.445-.1-.994.268-2.1.368-3.158.05-.53.04-1.046-.059-1.518-.097-.47-.3-.9-.616-1.24-.636-.68-1.608-.904-2.527-.974-.45-.035-.899-.026-1.334.026zm.042 1.174c.42-.047.852-.056 1.277-.022.812.062 1.59.262 2.047.758.228.245.37.554.44.918.073.366.08.78.03 1.233-.103 1.055-.486 2.198-.36 3.34.061.567.302 1.09.575 1.56.27.46.572.876.822 1.319.25.443.43.904.483 1.362.053.45.003.895-.2 1.269a.37.37 0 00-.099.11c-.35.56-.83.993-1.1 1.57-.28.587-.295 1.218-.12 1.822.088.3.215.585.33.869.217.526.253 1.015.066 1.4a1.088 1.088 0 01-.354.43c-.22.162-.502.322-.806.638-.7.742-.924 1.963-.756 3.254.028.207.038.414.013.605-.045.38-.19.688-.41.908-.33.335-.765.497-1.178.524-.414.027-.83-.054-1.14-.22-.315-.169-.54-.43-.691-.714-.358-.647-.445-1.572-.54-2.553-.1-1.012-.118-2.066-.67-2.593-.269-.247-.645-.345-1.117-.32-.232.014-.455.047-.677.047-.44 0-.836-.054-.97-.33-.065-.133-.073-.36.043-.688.1-.29.238-.586.292-.866.133-.676.05-1.313-.313-1.75-.364-.44-1.027-.604-1.718-.777-.69-.176-1.44-.396-1.582-.862-.092-.302-.06-.666.11-1.127.087-.23.097-.482.054-.727-.083-.499.053-.986.22-1.427.246-.66 1.463-2.382 2.39-3.479.87-1.044 1.15-2.02 1.22-3.167.063-1.26-.744-5.02 2.57-5.27z"/>
          </svg>
        </div>
        <h3 class="download-platform-name">Linux</h3>
        <p class="download-platform-desc">Ubuntu 20.04+ and compatible distributions</p>
        {% if linux_items %}
          {% for item in linux_items %}
          <div class="download-item">
            <span class="download-version">v{{ item.version }}</span>
            {% if item.description %}<p class="download-item-desc">{{ item.description }}</p>{% endif %}
            {% if item.download_url and item.download_url != '#' %}
            <a href="{{ item.download_url }}" class="btn-primary download-btn" download>
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
                <path d="M9 2V12M9 12L5 8M9 12L13 8M3 15H15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Download
            </a>
            {% endif %}
          </div>
          {% endfor %}
        {% else %}
        <span class="coming-soon-badge">Coming Soon</span>
        {% endif %}
      </div>

    </div>
  </div>
</section>

<section class="section" aria-labelledby="reinstall-heading">
  <div class="container">
    <div class="info-block glass-card fade-in">
      <h2 id="reinstall-heading">Installation Notes</h2>
      <p>
        If you have installed an older version of ViSERA, you can install the new version
        over it without removing the previous installation. However, if you encounter any
        problems, please remove the old version first before reinstalling.
      </p>
      <a href="{% url 'pages:faq' %}" class="btn-ghost">View Full FAQ</a>
    </div>
  </div>
</section>

{% endblock %}