{% extends "users/base.html" %}

{% load socialaccount %}
{% load static %}

{% block title %}
  About - Yamtrack
{% endblock title %}

{% block settings_content %}
  <div class="bg-[#2a2f35] rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-6">About Yamtrack</h2>

    <div class="space-y-6">
      <div class="space-y-2">
        <div class="flex items-center gap-2 text-lg font-medium text-gray-200">
          {% include "app/icons/info.svg" with classes="w-5 h-5 text-indigo-400" %}
          <h3>Description</h3>
        </div>
        <p class="text-gray-300 pl-7">
          Yamtrack is an open-source media tracker that helps you organize and track your media.
        </p>
      </div>

      <div class="space-y-4">
        <div class="flex items-center gap-2 text-lg font-medium text-gray-200">
          {% include "app/icons/external-link.svg" with classes="w-5 h-5 text-indigo-400" %}
          <h3>Links</h3>
        </div>
        <div class="grid gap-3 pl-7">
          <a href="https://github.com/FuzzyGrim/Yamtrack"
             target="_blank"
             rel="noopener noreferrer"
             class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 transition-colors">
            {% include "app/icons/github.svg" with classes="w-4 h-4" %}
            <span>Source Code</span>
            {% include "app/icons/external-link.svg" with classes="w-3 h-3 ml-1" %}
          </a>

          <a href="https://github.com/FuzzyGrim/Yamtrack/wiki"
             target="_blank"
             rel="noopener noreferrer"
             class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 transition-colors">
            {% include "app/icons/book-open.svg" with classes="w-4 h-4" %}
            <span>Documentation</span>
            {% include "app/icons/external-link.svg" with classes="w-3 h-3 ml-1" %}
          </a>

          <a href="https://github.com/FuzzyGrim/Yamtrack/issues"
             target="_blank"
             rel="noopener noreferrer"
             class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 transition-colors">
            {% include "app/icons/bug.svg" with classes="w-4 h-4" %}
            <span>Bug Reports</span>
            {% include "app/icons/external-link.svg" with classes="w-3 h-3 ml-1" %}
          </a>
        </div>
      </div>

      <div class="space-y-2">
        <div class="flex items-center gap-2 text-lg font-medium text-gray-200">
          {% include "app/icons/page.svg" with classes="w-5 h-5 text-indigo-400" %}
          <h3>License</h3>
        </div>
        <p class="text-gray-300 pl-7">
          Yamtrack is licensed under the

          <a href="https://github.com/FuzzyGrim/Yamtrack/blob/dev/LICENSE"
             target="_blank"
             rel="noopener noreferrer"
             class="text-indigo-400 hover:text-indigo-300 transition-colors">GNU Affero General Public License v3.0 (AGPL-3.0)</a>
        </p>
      </div>

      <div class="space-y-2">
        <div class="flex items-center gap-2 text-lg font-medium text-gray-200">
          {% include "app/icons/page.svg" with classes="w-5 h-5 text-indigo-400" %}
          <h3>Attribution</h3>
        </div>
        <p class="text-gray-300 pl-7">
          Movie and TV streaming providers from
          <a href="https://www.justwatch.com/"
             target="_blank"
             rel="noopener noreferrer"
             class="inline-flex items-center gap-2 text-indigo-400 hover:text-indigo-300 transition-colors">
            JustWatch
            {% include "app/icons/external-link.svg" with classes="w-3 h-3 ml-1" %}
          </a>
        </p>
      </div>

      <div class="mt-8 pt-4 border-t border-gray-700">
        <p class="text-gray-400 text-sm">
          Version: <span class="font-mono">{{ version }}</span>
        </p>
      </div>
    </div>
  </div>
{% endblock settings_content %}