{% extends "base.html" %}

{% block title %}Home Page{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Available Endpoints</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {% for route in routes %}
    <div
      class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">{{ route.name }}</h2>
        <div class="mb-4">
          <span
            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">
            {{ route.methods | join(', ') }}
          </span>
        </div>
        <div class="flex items-center justify-between">
          <code
            class="text-sm text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">{{ route.path }}</code>
          {% if 'GET' in route.methods %}
          <a href="{{ route.path }}"
            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
            Visit
          </a>
          {% endif %}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

{% endblock %}

{% block css %}
{{ super() }}
{% endblock %}