{% extends "base.html" %}
{% block title %}{{ _("cookie_policy.page_title") }}{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8 max-w-4xl">
  <h1 class="text-4xl font-bold mb-6">{{ _("cookie_policy.heading") }}</h1>
  <p class="text-sm text-gray-500 mb-8">{{ _("cookie_policy.last_updated") }} {{ build_date|default(current_date|default('May 14, 2024')) }}</p>

  <div class="bg-white shadow rounded-lg p-6 mb-6">
    <h2 class="text-2xl font-semibold mb-4">{{ _("cookie_policy.s1_heading") }}</h2>
    <p class="text-gray-700 mb-3">
      {{ _("cookie_policy.s1_p1") }}
    </p>
  </div>

  <div class="bg-white shadow rounded-lg p-6 mb-6">
    <h2 class="text-2xl font-semibold mb-4">{{ _("cookie_policy.s2_heading") }}</h2>
    <p class="text-gray-700 mb-3">
      {{ _("cookie_policy.s2_p1_pre") }} <strong>{{ _("cookie_policy.s2_p1_strong") }}</strong> {{ _("cookie_policy.s2_p1_post") }}
    </p>
    <ul class="list-disc list-inside text-gray-700 ml-4 mb-3">
      <li><strong>{{ _("cookie_policy.s2_li1_label") }}</strong> {{ _("cookie_policy.s2_li1_body") }}</li>
    </ul>
    <p class="text-gray-700 mb-3">
      {{ _("cookie_policy.s2_p2") }}
    </p>
    <p class="text-gray-700">
      {{ _("cookie_policy.s2_p3") }}
    </p>
  </div>

  <div class="bg-white shadow rounded-lg p-6 mb-6">
    <h2 class="text-2xl font-semibold mb-4">{{ _("cookie_policy.s3_heading") }}</h2>
    <div class="overflow-x-auto">
      <table class="min-w-full text-sm text-gray-700 border border-gray-200 rounded" aria-label="{{ _('cookie_policy.s3_heading') }}">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-4 py-2 text-left font-semibold border-b" scope="col">{{ _("cookie_policy.s3_col_name") }}</th>
            <th class="px-4 py-2 text-left font-semibold border-b" scope="col">{{ _("cookie_policy.s3_col_type") }}</th>
            <th class="px-4 py-2 text-left font-semibold border-b" scope="col">{{ _("cookie_policy.s3_col_purpose") }}</th>
            <th class="px-4 py-2 text-left font-semibold border-b" scope="col">{{ _("cookie_policy.s3_col_duration") }}</th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-b">
            <td class="px-4 py-2 font-mono">session</td>
            <td class="px-4 py-2">{{ _("cookie_policy.s3_row1_type") }}</td>
            <td class="px-4 py-2">{{ _("cookie_policy.s3_row1_purpose") }}</td>
            <td class="px-4 py-2">{{ _("cookie_policy.s3_row1_duration") }}</td>
          </tr>
          <tr>
            <td class="px-4 py-2 font-mono">cookieNoticeDismissed</td>
            <td class="px-4 py-2">{{ _("cookie_policy.s3_row2_type") }}</td>
            <td class="px-4 py-2">{{ _("cookie_policy.s3_row2_purpose") }}</td>
            <td class="px-4 py-2">{{ _("cookie_policy.s3_row2_duration") }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="bg-white shadow rounded-lg p-6 mb-6">
    <h2 class="text-2xl font-semibold mb-4">{{ _("cookie_policy.s4_heading") }}</h2>
    <p class="text-gray-700 mb-3">
      {{ _("cookie_policy.s4_p1") }}
    </p>
    <p class="text-gray-700">
      {{ _("cookie_policy.s4_p2_pre") }} <a href="/privacy" class="text-blue-600 hover:underline">{{ _("cookie_policy.s4_privacy_link") }}</a>.
    </p>
  </div>

  <div class="bg-white shadow rounded-lg p-6 mb-6">
    <h2 class="text-2xl font-semibold mb-4">{{ _("cookie_policy.s5_heading") }}</h2>
    <p class="text-gray-700 mb-3">
      {{ _("cookie_policy.s5_p1") }}
    </p>
    <p class="text-gray-700 mb-3">
      {{ _("cookie_policy.s5_p2") }}
    </p>
    <p class="text-gray-700">
      {{ _("cookie_policy.s5_p3_pre") }} <a href="/terms" class="text-blue-600 hover:underline">{{ _("cookie_policy.s5_terms_link") }}</a>
      {{ _("cookie_policy.s5_p3_and") }} <a href="/privacy" class="text-blue-600 hover:underline">{{ _("cookie_policy.s5_privacy_link") }}</a>.
    </p>
  </div>
</div>
{% endblock %}