{# templates/registration/logout.html #}
{% extends "base.html" %}
{% load static %}

{% block title %}Выход{% endblock %}

{% block extra_css %}{% endblock %}

{% block content %}
  {# Перекрываем основной контент полноэкранным диалогом #}
  <div class="ios-overlay" role="dialog" aria-modal="true" aria-labelledby="logoutTitle" aria-describedby="logoutText">
    <div class="ios-sheet">
      <div class="ios-grip" aria-hidden="true"></div>
      <div class="ios-body">
        {# аватар если есть, иначе красивая иконка выхода #}
        {% if user.avatar %}
          <div class="ios-ava">
            <img src="{{ user.avatar.url }}" alt="">
          </div>
        {% else %}
          <div class="ios-ico">
            <i class="bi-box-arrow-right fs-3"></i>
          </div>
        {% endif %}

        <h1 id="logoutTitle" class="ios-title">Выйти из аккаунта?</h1>
        <p id="logoutText" class="ios-sub">
          {{ user.get_short_name|default:"Вы" }}, вы уверены, что хотите завершить сеанс?<br>
          Вы всегда можете войти снова — данные не удаляются.
        </p>

        <form method="post" class="ios-actions" autocomplete="off">
          {% csrf_token %}
          <input type="hidden" name="next" value="{{ next|default:'' }}">


          <button type="submit" class="btn ios-btn ios-btn-danger" id="confirmBtn">
            Выйти
          </button>

          <a href="javascript:void(0)" class="btn ios-btn ios-btn-ghost text-decoration-none text-center" id="cancelBtn">
            Отмена
          </a>
        </form>
      </div>
    </div>
  </div>
{% endblock %}

{% block extra_js %}
<script type="module">
  import { initLogoutModal } from "{% static 'js/components/logoutModalHandler.js' %}";
  
  initLogoutModal({
    cancelButtonId: 'cancelBtn',
    confirmButtonId: 'confirmBtn',
    overlaySelector: '.ios-overlay',
    loginUrl: "{% url 'auth_front:login' %}"
  });
</script>
{% endblock %}