{% extends "pages/base.html" %}
{% load i18n %}
{% block title %}{{ title }}{% endblock %}
{% block extra_head %}
  {% if canonical_url %}
    <link rel="canonical" href="{{ canonical_url }}">
  {% endif %}
{% endblock %}

{% block content %}
<div class="row">
  <div class="col-12 col-xl-8">
    <div class="markdown-body">
      <h1>{{ title }}</h1>
      <p>{% trans "Browse curated developer references below with quick summaries to help you choose the right guide." %}</p>
      {% if missing_document %}
        <div class="alert alert-warning" role="alert">
          {% blocktrans with missing_document=missing_document %}The requested document "{{ missing_document }}" was not found. Choose one of the available documents below.{% endblocktrans %}
        </div>
      {% endif %}
      <h2>{% trans "Indexed Documents" %}</h2>
      {% if document_index_admin_changelist_url and document_index_admin_add_url %}
        <p class="small mb-3">
          <a href="{{ document_index_admin_changelist_url }}">{% trans "Manage indexed documents" %}</a>
          ·
          <a href="{{ document_index_admin_add_url }}">{% trans "Create indexed document" %}</a>
        </p>
      {% endif %}
      {% if indexed_groups %}
        {% for group in indexed_groups %}
          <h3 class="h5">{{ group.title }}</h3>
          <div class="row row-cols-1 row-cols-lg-2 g-3 mb-4">
            {% for item in group.items %}
              <div class="col">
                <div class="card h-100 shadow-sm">
                  <div class="card-body">
                    <h4 class="h6 mb-2"><a href="{{ item.url }}">{{ item.label }}</a></h4>
                    <p class="mb-2 text-muted">{{ item.description }}</p>
                    <span class="badge text-bg-primary">{{ item.access }}</span>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        {% endfor %}
      {% else %}
        <p class="text-muted">{% trans "No indexed documents are available." %}</p>
      {% endif %}

      <h2>{% trans "Other Documents" %}</h2>
      {% if sections %}
        {% for section in sections %}
          <h3 class="h5">{{ section.title }}</h3>
          {% if section.current_prefix and section.parent_url %}
            <p class="mb-2"><a href="{{ section.parent_url }}">← {% trans "Up one level" %}</a></p>
          {% endif %}
          {% if section.items %}
            <ul class="list-unstyled mb-4">
              {% for item in section.items %}
                <li class="mb-2">
                  <a href="{{ item.url }}">{{ item.label }}</a>
                  {% if item.description %}
                    <div class="text-muted small">{{ item.description }}</div>
                  {% endif %}
                </li>
              {% endfor %}
            </ul>
          {% else %}
            <p class="text-muted">{% trans "No document folders are available." %}</p>
          {% endif %}
        {% endfor %}
      {% else %}
        <p class="text-muted">{% trans "No document folders are available." %}</p>
      {% endif %}
    </div>
  </div>
  <aside class="col-12 col-xl-4 mt-4 mt-xl-0">
    <div class="card shadow-sm h-100">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h2 class="h5 mb-0">{% trans "Developer Gallery" %}</h2>
          <a class="btn btn-sm btn-outline-primary" href="{{ gallery_index_url }}">{% trans "Open gallery" %}</a>
        </div>
        <p class="text-muted small mb-3">
          {% trans "Preview the latest uploads and jump straight to the full gallery." %}
        </p>
        {% if github_connected %}
          <p class="mb-3">
            <a class="btn btn-sm btn-outline-dark" href="{{ github_issue_viewer_url }}">{% trans "Open GitHub issue viewer" %}</a>
          </p>
        {% endif %}
        <p class="mb-3">
          {% if is_gallery_manager %}
            <a class="btn btn-sm btn-primary" href="{{ gallery_upload_url }}">{% trans "Create / upload image" %}</a>
          {% else %}
            <a class="btn btn-sm btn-outline-secondary" href="{{ gallery_upload_url }}">{% trans "Create / upload image" %}</a>
            <span class="d-block text-muted small mt-2">{% trans "Upload requires Gallery Manager, staff, or superuser access." %}</span>
          {% endif %}
        </p>
        <div class="row row-cols-2 g-2">
          {% for image in gallery_images %}
            <div class="col">
              <a href="{% url 'gallery:detail' slug=image.slug %}" class="text-decoration-none">
                <img src="{{ image.media_file.file.url }}" alt="{{ image.title }}" class="img-fluid rounded border" loading="lazy" decoding="async">
                <div class="small mt-1 text-truncate">{{ image.title }}</div>
              </a>
            </div>
          {% empty %}
            <div class="col-12">
              <div class="alert alert-light border mb-0">{% trans "No gallery images are visible yet." %}</div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </aside>
</div>
{% endblock %}