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

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

{% block settings_content %}
  <div class="bg-[#2a2f35] rounded-lg p-6">
    <div class="flex items-center mb-4">
      <svg xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="w-6 h-6 text-indigo-400 mr-3">
        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
        <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
        <path d="M12 18v-6"></path>
        <path d="m9 15 3 3 3-3"></path>
      </svg>
      <h2 class="text-xl font-semibold">Export Data</h2>
    </div>
    <p class="text-gray-400 mb-5 text-sm">Back up your data or export it for use with other services.</p>
    <p class="text-sm text-gray-400 mb-4">Your export will include all your media items.</p>
    <form method="get" action="{% url 'export_csv' %}">
      {% csrf_token %}
      <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors text-sm cursor-pointer">
        Export as CSV
      </button>
    </form>
  </div>
{% endblock settings_content %}
