{% extends 'layouts/base.html' %}
{% load static %}
{% load i18n %}

{% block title %} {% trans "Excluir Post" %} {% endblock title %}

{% block content %}
<div class="container-fluid py-4">
  <div class="row">
    <div class="col-lg-6 mx-auto">
      
      <div class="card">
        <div class="card-header bg-danger text-white">
          <h4 class="mb-0">
            <i class="bi bi-exclamation-triangle"></i> {% trans "Confirmar Exclusão" %}
          </h4>
        </div>
        <div class="card-body">
          
          <div class="text-center mb-4">
            <i class="bi bi-trash display-1 text-danger"></i>
            <h4 class="mt-3">{% trans "Tem certeza que deseja excluir este post?" %}</h4>
            <p class="text-muted">{% trans "Esta ação não pode ser desfeita." %}</p>
          </div>
          
          <!-- Preview do post -->
          <div class="card border-warning">
            <div class="card-header bg-warning bg-opacity-10">
              <div class="d-flex align-items-center">
                <div class="avatar-container me-3" style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden;">
                  {% if object.author.avatar %}
                    <img src="{% url 'serve_files:serve_decrypted_file_with_timestamp' 'home' 'user' 'avatar' object.author.uuid timestamp %}" 
                         alt="Avatar" class="w-100 h-100" style="object-fit: cover;">
                  {% else %}
                    <img src="{% static 'assets/img/team/generic_user.png' %}" 
                         alt="Avatar" class="w-100 h-100" style="object-fit: cover;">
                  {% endif %}
                </div>
                <div class="flex-grow-1">
                  <h6 class="mb-0">{{ object.author.get_full_name|default:object.author.username }}</h6>
                  <small class="text-muted">{{ object.created_at|timesince }} {% trans "atrás" %}</small>
                </div>
              </div>
            </div>
            <div class="card-body">
              <p class="card-text">{{ object.content|truncatewords:30 }}</p>
              {% if object.image %}
                <div class="text-center">
                  <img src="{{ object.image.url }}" alt="Post image" class="img-fluid rounded" style="max-height: 200px;">
                </div>
              {% endif %}
              <div class="d-flex align-items-center mt-3">
                <span class="me-3">
                  <i class="bi bi-heart text-danger"></i>
                  <span>{{ object.likes_count }}</span>
                </span>
                <span>
                  <i class="bi bi-chat"></i>
                  <span>{{ object.comments_count }}</span>
                </span>
              </div>
            </div>
          </div>
          
          <!-- Informações sobre a exclusão -->
          <div class="alert alert-warning mt-4">
            <h6><i class="bi bi-info-circle"></i> {% trans "O que será excluído:" %}</h6>
            <ul class="mb-0">
              <li>{% trans "O post e todo seu conteúdo" %}</li>
              <li>{% trans "Todas as imagens associadas" %}</li>
              <li>{% trans "Todos os comentários" %}</li>
              <li>{% trans "Todas as curtidas" %}</li>
            </ul>
          </div>
          
          <!-- Formulário de confirmação -->
          <form method="post">
            {% csrf_token %}
            <div class="d-flex justify-content-between align-items-center mt-4">
              <a href="{% url 'social:post_detail' object.id %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> {% trans "Cancelar" %}
              </a>
              <button type="submit" class="btn btn-danger">
                <i class="bi bi-trash"></i> {% trans "Sim, excluir post" %}
              </button>
            </div>
          </form>
          
        </div>
      </div>
      
    </div>
  </div>
</div>
{% endblock content %}