{% extends "admin/base_site.html" %}
{% load i18n %}

{% block breadcrumbs %}
<div class="flex items-center space-x-2">
  <a class="text-blue-500 hover:underline" href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
  <span class="text-gray-500">&rsaquo;</span>
  <span class="text-gray-500">{% translate 'Documentation' %}</span>
</div>
{% endblock %}

{% block title %}{% translate 'Documentation' %}{% endblock %}

{% block content %}

<h1 class="text-2xl font-semibold mb-4">{% translate 'Documentation' %}</h1>

<div id="content-main" class="space-y-6">
  <div>
    <h2 class="text-xl text-blue-600"><a class="hover:underline" href="tags/">{% translate 'Tags' %}</a></h2>
    <p class="text-gray-600">{% translate 'List of all the template tags and their functions.' %}</p>
  </div>

  <div>
    <h2 class="text-xl text-blue-600"><a class="hover:underline" href="filters/">{% translate 'Filters' %}</a></h2>
    <p class="text-gray-600">{% translate 'Filters are actions which can be applied to variables in a template to alter the output.' %}</p>
  </div>

  <div>
    <h2 class="text-xl text-blue-600"><a class="hover:underline" href="models/">{% translate 'Models' %}</a></h2>
    <p class="text-gray-600">{% translate 'Models are descriptions of all the objects in the system and their associated fields. Each model has a list of fields which can be accessed as template variables.' %}</p>
  </div>

  <div>
    <h2 class="text-xl text-blue-600"><a class="hover:underline" href="views/">{% translate 'Views' %}</a></h2>
    <p class="text-gray-600">{% translate 'Each page on the public site is generated by a view. The view defines which template is used to generate the page and which objects are available to that template.' %}</p>
  </div>

  <div>
    <h2 class="text-xl text-blue-600"><a class="hover:underline" href="bookmarklets/">{% translate 'Bookmarklets' %}</a></h2>
    <p class="text-gray-600">{% translate 'Tools for your browser to quickly access admin functionality.' %}</p>
  </div>
</div>

{% endblock %}
