{% extends "helpapp/base_help.html" %}

{% block title %}{{ article.title }} — {{ helpapp_brand_name|default:"Help Center" }}{% endblock %}

{% block content %}
<style>
  .helpapp-markdown ol {
    list-style: decimal;
    list-style-position: outside;
    margin: 1rem 0;
    padding-left: 2rem;
  }

  .helpapp-markdown ul {
    list-style: disc;
    list-style-position: outside;
    margin: 1rem 0;
    padding-left: 2rem;
  }

  .helpapp-markdown li {
    display: list-item;
  }

  .helpapp-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }

  .helpapp-feedback-btn[aria-pressed="true"] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .helpapp-feedback-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none !important;
  }

  .helpapp-feedback-btn:focus-visible,
  .helpapp-feedback-thanks a:focus-visible,
  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--helpapp-primary, #2563eb);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {

    .helpapp-feedback-btn,
    a {
      transition: none !important;
    }
  }
</style>

<div class="max-w-5xl mx-auto">

  <nav aria-label="Breadcrumb" class="mb-8 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-slate-500">

    <a href="{% url 'helpapp:portal' %}" class="transition hover:text-slate-900">
      Help Center
    </a>

    <span class="text-slate-300" aria-hidden="true">/</span>

    {% if article.category %}
    <a href="{% if article.category.get_absolute_url %}{{ article.category.get_absolute_url }}{% else %}{% url 'helpapp:portal' %}?category={{ article.category.slug }}{% endif %}"
      class="transition hover:text-slate-900">
      {{ article.category.name }}
    </a>

    <span class="text-slate-300" aria-hidden="true">/</span>
    {% endif %}

    <span class="min-w-0 flex-1 truncate font-medium text-slate-700" title="{{ article.title }}" aria-current="page">
      {{ article.title }}
    </span>

  </nav>


  <article class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">

    <header class="border-b border-slate-100 px-5 py-6 sm:px-8 sm:py-8 lg:px-10 lg:py-10">

      {% if article.category %}
      <span class="inline-flex rounded-full px-4 py-1 text-xs font-semibold uppercase tracking-wider text-white"
        style="background-color:var(--helpapp-primary)">
        {{ article.category.name }}
      </span>
      {% endif %}

      <h1 class="mt-4 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl lg:text-4xl">
        {{ article.title }}
      </h1>

      <div class="mt-2 flex flex-wrap items-center gap-6 text-sm text-slate-500">
        <div class="flex items-center gap-2 text-emerald-600">
          <svg class="helpapp-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd"
              d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
              clip-rule="evenodd" />
          </svg>
          <span>Verified</span>
        </div>
        {% if article.updated_at %}
        <div class="flex items-center gap-2">
          <span>Updated {{ article.updated_at|date:"M j, Y" }}</span>
        </div>
        {% endif %}
      </div>

    </header>


    <div class="px-8 lg:px-10 py-10">

      <div class="helpapp-markdown break-words">
        {{ article.body_froala|safe }}
      </div>

    </div>


    {% if article.tags.all %}

    <footer class="border-t border-slate-100 px-5 py-6 sm:px-8 lg:px-10">

      <h3 class="mb-4 text-sm font-semibold uppercase tracking-wide text-slate-500">
        Related Topics
      </h3>

      <div class="flex flex-wrap gap-3">

        {% for tag in article.tags.all %}

        <span
          class="rounded-full border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-slate-300 hover:bg-slate-100">
          #{{ tag.name }}
        </span>

        {% endfor %}

      </div>

    </footer>

    {% endif %}

  </article>


  <section id="helpapp-feedback" data-article-slug="{{ article.slug }}"
    class="mt-10 overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">

    <div class="px-6 py-8 text-center sm:px-10">

      <h2 class="text-2xl font-bold text-slate-900">
        Was this article helpful?
      </h2>

      <p class="mx-auto mt-3 max-w-xl text-slate-500">
        Your feedback helps us improve the documentation and provide
        better guidance for everyone.
      </p>

      <div class="helpapp-feedback-options mt-8 flex flex-col justify-center gap-4 sm:flex-row">

        <button type="button" data-value="true" aria-pressed="false"
          class="helpapp-feedback-btn inline-flex items-center justify-center gap-2 rounded-2xl border border-green-200 bg-green-50 px-8 py-4 font-semibold text-green-700 transition hover:bg-green-100 hover:shadow-md">

          <svg class="helpapp-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path
              d="M1 8.25a1.25 1.25 0 112.5 0v7.5a1.25 1.25 0 11-2.5 0v-7.5zM11 3V1.7c0-.268.14-.526.395-.607A2 2 0 0114 3c0 .995-.182 1.948-.514 2.826-.204.54.166 1.174.744 1.174h2.52c1.243 0 2.261 1.01 2.146 2.247a23.864 23.864 0 01-1.341 5.974C17.153 16.323 16.072 17 14.9 17h-3.192a3 3 0 01-1.341-.317l-2.734-1.366A3 3 0 006.292 15H5V8h.963c.685 0 1.212-.483 1.612-1.068a4.011 4.011 0 002.166-1.73c.432-.678.79-1.443 1.026-2.297.129-.463.161-.95.161-1.436V3h.072z" />
          </svg>
          <span>Yes, it helped</span>

        </button>

        <button type="button" data-value="false" aria-pressed="false"
          class="helpapp-feedback-btn inline-flex items-center justify-center gap-2 rounded-2xl border border-red-200 bg-red-50 px-8 py-4 font-semibold text-red-700 transition hover:bg-red-100 hover:shadow-md">

          <svg class="helpapp-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path
              d="M18.905 12.75a1.25 1.25 0 11-2.5 0v-7.5a1.25 1.25 0 112.5 0v7.5zM8.905 17v1.3c0 .268-.14.526-.395.607A2 2 0 015.905 17c0-.995.182-1.948.514-2.826.204-.54-.166-1.174-.744-1.174h-2.52c-1.243 0-2.261-1.01-2.146-2.247.193-2.08.652-4.082 1.341-5.974C2.652 3.677 3.733 3 4.905 3h3.192a3 3 0 011.341.317l2.734 1.366a3 3 0 001.342.317h1.292v7h-.963c-.685 0-1.212.483-1.612 1.068a4.01 4.01 0 00-2.166 1.73c-.432.678-.79 1.443-1.026 2.297-.129.463-.161.95-.161 1.436V17h-.072z" />
          </svg>
          <span>Needs improvement</span>

        </button>

      </div>

      <div
        class="helpapp-feedback-thanks mt-8 hidden rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-emerald-700"
        role="status" aria-live="polite">

        <div class="flex items-center justify-center gap-2">
          <svg class="helpapp-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd" />
          </svg>
          <span class="helpapp-feedback-thanks-text font-medium">
            Thank you! Your feedback has been recorded.
          </span>
        </div>

      </div>

    </div>

    <div class="border-t border-slate-100 bg-slate-50 px-6 py-6 sm:px-10">

      <div class="flex flex-col items-center justify-between gap-4 text-center sm:flex-row sm:text-left">

        <div>

          <h3 class="font-semibold text-slate-900">
            Still need help?
          </h3>

          <p class="mt-1 text-sm text-slate-500">
            Browse more articles or search for another topic.
          </p>

        </div>

        <div class="flex gap-3">

          <a href="{% url 'helpapp:portal' %}"
            class="rounded-xl border border-slate-300 bg-white px-5 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-100">

            Browse Articles

          </a>

        </div>

      </div>

    </div>

  </section>
</div>

<script>
  (function () {
    "use strict";

    var section = document.getElementById("helpapp-feedback");
    if (!section) return;

    var slug = section.dataset.articleSlug;
    var buttons = section.querySelectorAll(".helpapp-feedback-btn");
    var thanks = section.querySelector(".helpapp-feedback-thanks");
    var thanksText = section.querySelector(".helpapp-feedback-thanks-text");
    var options = section.querySelector(".helpapp-feedback-options");

    function getCookie(name) {
      var match = document.cookie.match(
        new RegExp("(^| )" + name + "=([^;]+)")
      );
      return match ? decodeURIComponent(match[2]) : null;
    }

    function submitFeedback(value, btn) {
      // Optimistically reflect the choice in the UI.
      buttons.forEach(function (b) {
        b.setAttribute("aria-pressed", String(b === btn));
        b.disabled = true;
      });

      if (options) {
        options.setAttribute("aria-hidden", "true");
      }

      if (thanks) {
        thanks.classList.remove("hidden");
      }

      var csrfToken = getCookie("csrftoken");
      var endpoint = section.dataset.feedbackUrl;

      // Only attempt to persist the vote if the page tells us where to send it.
      // Set data-feedback-
      // on #helpapp-feedback once that view exists.
      if (!endpoint) return;

      fetch(endpoint, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRFToken": csrfToken || "",
        },
        body: JSON.stringify({ slug: slug, helpful: value }),
      }).catch(function () {
        if (thanksText) {
          thanksText.textContent =
            "Thanks for the feedback — we couldn't save it just now, but it's noted.";
        }
      });
    }

    buttons.forEach(function (btn) {
      btn.addEventListener("click", function () {
        submitFeedback(btn.dataset.value === "true", btn);
      });
    });
  })();
</script>

{% endblock %}