{% extends 'base.html' %}
{% load i18n %}

{% block content %}
<div class="max-w-4xl mx-auto mt-8">
  <div class="bg-white shadow-md rounded-lg overflow-hidden">
    <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
      <h1 class="text-2xl font-bold text-gray-800">{% trans "Tools" %}</h1>
    </div>
    <div class="p-6 space-y-8">
      <!-- Export Links Section -->
      <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
          <h2 class="text-xl font-semibold">{% trans "Export Aliases" %}</h2>
        </div>
        <div class="p-6">
          <form method="post" class="mb-4">
            {% csrf_token %}
            <button type="submit" name="export" class="bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium py-2 px-4 rounded inline-flex items-center transition duration-150 ease-in-out">
              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
              </svg>
              {% trans "Export as JSON" %}
            </button>
          </form>
        </div>
      </div>

      <!-- Database Export Section -->
      <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
          <h2 class="text-xl font-semibold">{% trans "Database Export" %}</h2>
        </div>
        <div class="p-6">
          <p class="text-gray-600 text-sm mb-4">{% trans "Export the entire database as a compressed file." %}</p>
          <a href="{% url 'export_database' %}"
             class="bg-purple-500 hover:bg-purple-600 text-white text-sm font-medium py-2 px-4 rounded inline-flex items-center transition duration-150 ease-in-out">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
            </svg>
            {% trans "Export Database" %}
          </a>
        </div>
      </div>

      <!-- Import Links Section -->
      <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
          <h2 class="text-xl font-semibold">{% trans "Import Aliases" %}</h2>
        </div>
        <div class="p-6">
          <div class="mb-6">
            <p class="text-gray-600 text-sm mb-4">{% trans "Import aliases from a JSON file. The file should contain a list of objects with the following fields:" %}</p>
            <ul class="list-disc list-inside text-sm text-gray-600 space-y-1 ml-4">
              <li>{% trans "alias (required): The short alias for the URL" %}</li>
              <li>{% trans "original_url (required): The original URL" %}</li>
              <li>{% trans "created_at (optional): Creation timestamp (ISO format)" %}</li>
              <li>{% trans "updated_at (optional): Last update timestamp (ISO format)" %}</li>
            </ul>
          </div>

          <div class="bg-gray-50 rounded-lg p-4 mb-6">
            <h3 class="text-sm font-semibold text-gray-700 mb-2">{% trans "Example JSON file content:" %}</h3>
            <pre class="bg-white p-3 rounded text-xs overflow-x-auto">
[
  {
    "alias": "example",
    "original_url": "https://example.com",
    "created_at": "2023-09-08T12:00:00Z",
    "updated_at": "2023-09-08T12:00:00Z"
  },
  {
    "alias": "google",
    "original_url": "https://www.google.com"
  }
]
            </pre>
          </div>

          <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="mb-4">
              <input type="file" name="json_file" accept=".json" required
                     class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
            </div>
            <button type="submit" name="import"
                    class="bg-green-500 hover:bg-green-600 text-white text-sm font-medium py-2 px-4 rounded inline-flex items-center transition duration-150 ease-in-out">
              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
              </svg>
              {% trans "Import from JSON" %}
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}