{% extends "layout.html" %}
{% load i18n %}
{% load custom_filters %}  <!-- Cargar un filtro personalizado si es necesario -->


{% block title %} {{ _("Publicaciones") }} {% endblock title %}

{% block head %}
<!-- Puedes agregar estilos adicionales aquí si es necesario -->
{% endblock %}

{% block content %}
{% load static %}
{% load humanize %}

<div class="main-content">
    <div class="page-content">
        <div class="container-fluid contenido-principal">
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">{% trans "Foro de Conocimiento Agrícola" %}</h3>
                        </div>
                        <div class="card-body">
                            <p class="mb-3">{% trans "Comparte, Aprende y Conéctate en un espacio dedicado al intercambio de experiencias y conocimientos agrícolas." %}</p>
                            <button type="button" class="btn btn-sm btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#addPostModal">
                                <i class="bi bi-plus"></i> {% trans "Nueva Publicación" %}
                            </button>
                        </div>
                    </div>

                    <div class="mt-5">
                        <ul class="list-group">
                            {% for post in posts %}
                                <li class="list-group-item mb-3">
                                    <h5 class="card-title">{{ post.title }}</h5>
                                    <p>{{ post.content }}</p>
                                    <small><strong>{% trans "Publicado por:" %}</strong> {{ post.author }}</small>
                                    <br>
                                    <!-- Botones para el post -->
                                    <div class="d-flex gap-2 mt-2">
                                        <a href="#" class="btn btn-sm btn-primary btn-rrss p-2" 
                                           data-bs-toggle="modal" 
                                           data-bs-target="#addCommentModal{{ post.id }}"
                                           title="Comentar">
                                            <i class="bi bi-chat"></i>
                                        </a>
                                        {% if post.author_type == scout_content_type and post.author_id == scout_id %}
                                            <a href="#" class="btn btn-sm btn-secondary btn-rrss p-2" 
                                               data-bs-toggle="modal" 
                                               data-bs-target="#editPostModal{{ post.id }}"
                                               title="Editar">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <a href="#" class="btn btn-sm btn-danger btn-rrss p-2" 
                                               data-bs-toggle="modal" 
                                               data-bs-target="#deletePostModal{{ post.id }}"
                                               title="Eliminar">
                                                <i class="bi bi-trash"></i>
                                            </a>
                                        {% endif %}
                                    </div>

                                    
                                    <!-- Modal para editar publicación -->
                                    <div class="modal fade" id="editPostModal{{ post.id }}" tabindex="-1" role="dialog" aria-labelledby="editPostModalLabel" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <form method="POST" action="{% url 'edit_post' post.id %}">
                                                    {% csrf_token %}
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="editPostModalLabel">{% trans "Editar Publicación" %}</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="form-group">
                                                            <label for="id_title" class="col-label">{% trans "Titulo:" %}</label>
                                                            <input type="text" name="title" value="{{ post.title }}" class="form-control">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="id_content" class="col-label">{% trans "Contenido:" %}</label>
                                                            <textarea name="content" class="form-control">{{ post.content }}</textarea>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{% trans "Cerrar" %}</button>
                                                        <button type="submit" class="btn btn-sm btn-primary">{% trans "Guardar Cambios" %}</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Modal para eliminar publicación -->
                                    <div class="modal fade" id="deletePostModal{{ post.id }}" tabindex="-1" role="dialog" aria-labelledby="deletePostModalLabel" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <form method="POST" action="{% url 'delete_post' post.id %}">
                                                    {% csrf_token %}
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="deletePostModalLabel">{% trans "Eliminar Publicación" %}</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>{% trans "¿Estás seguro de que deseas eliminar esta publicación?" %}</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
                                                        <button type="submit" class="btn btn-sm btn-danger">{% trans "Eliminar" %}</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Modal para añadir comentarios -->
                                    <div class="modal fade" id="addCommentModal{{ post.id }}" tabindex="-1" role="dialog" aria-labelledby="addCommentModalLabel" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <form method="POST" action="{% url 'add_comment' post.id %}">
                                                    {% csrf_token %}
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="addCommentModalLabel">{% trans "Añadir Comentario" %}</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="form-group">
                                                            <label for="id_content" class="col-label">{% trans "Comentario:" %}</label>
                                                            <textarea name="content" class="form-control"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{% trans "Cerrar" %}</button>
                                                        <button type="submit" class="btn btn-sm btn-primary">{% trans "Comentar" %}</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>


                                    <!-- Listar comentarios -->
                            <div class="accordion mt-3" id="accordionComments{{ post.id }}">
                                <div class="accordion-item">
                                    <h2 class="accordion-header header-comentario" id="heading{{ post.id }}">
                                        <button class="accordion-button collapsed" type="button" 
                                                data-bs-toggle="collapse" 
                                                data-bs-target="#collapse{{ post.id }}" 
                                                aria-expanded="false" 
                                                aria-controls="collapse{{ post.id }}"
                                                style="background-color: aliceblue;font-size: 14px;">
                                            <strong>Comentarios</strong> ({{ post.comments.count }})
                                        </button>
                                    </h2>

                                    <div id="collapse{{ post.id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ post.id }}" data-bs-parent="#accordionComments{{ post.id }}">
                                        <div class="accordion-body">
                                            <ul class="list-group comments mt-3">
                                                {% for comment in post.comments.all %}
                                                    <li class="list-group-item">
                                                        <p>{{ comment.content }}</p>
                                                        <small>Comentado por: {{ comment.author }}</small>
                                                          <!-- Botones para el comentario -->
                                                        {% if comment.author_type == scout_content_type and comment.author_id == scout_id %}
                                                            <div class="d-flex gap-2 mt-2">
                                                                <a href="#" class="btn btn-sm btn-secondary btn-rrss p-2" 
                                                                   data-bs-toggle="modal" 
                                                                   data-bs-target="#editCommentModal{{ comment.id }}"
                                                                   title="Editar">
                                                                    <i class="bi bi-pencil"></i>
                                                                </a>
                                                                <a href="#" class="btn btn-sm btn-danger btn-rrss p-2" 
                                                                   data-bs-toggle="modal" 
                                                                   data-bs-target="#deleteCommentModal{{ comment.id }}"
                                                                   title="Eliminar">
                                                                    <i class="bi bi-trash"></i>
                                                                </a>
                                                            </div>
                                                        {% endif %}
                                                    </li>
                                                        <!-- Modal para editar comentario -->
                                                        <div class="modal fade" id="editCommentModal{{ comment.id }}" tabindex="-1" role="dialog" aria-labelledby="editCommentModalLabel" aria-hidden="true">
                                                            <div class="modal-dialog" role="document">
                                                                <div class="modal-content">
                                                                    <form method="POST" action="{% url 'edit_comment' comment.id %}">
                                                                        {% csrf_token %}
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title" id="editCommentModalLabel">{% trans "Editar Comentario" %}</h5>
                                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <div class="form-group">
                                                                                <label for="id_content" class="col-label">{% trans "Comentario:" %}</label>
                                                                                <textarea name="content" class="form-control">{{ comment.content }}</textarea>
                                                                            </div>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
                                                                            <button type="submit" class="btn btn-primary">{% trans "Guardar Cambios" %}</button>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>


                                                        <!-- Modal para eliminar comentario -->
                                                        <div class="modal fade" id="deleteCommentModal{{ comment.id }}" tabindex="-1" role="dialog" aria-labelledby="deleteCommentModalLabel" aria-hidden="true">
                                                            <div class="modal-dialog" role="document">
                                                                <div class="modal-content">
                                                                    <form method="POST" action="{% url 'delete_comment' comment.id %}">
                                                                        {% csrf_token %}
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title" id="deleteCommentModalLabel">{% trans "Eliminar Comentario" %}</h5>
                                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <p>{% trans "¿Estás seguro de que deseas eliminar este comentario?" %}</p>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
                                                                            <button type="submit" class="btn btn-danger">{% trans "Eliminar" %}</button>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>

                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">{% trans "Noticias Agricarm" %}</h3>
                        </div>
                        <div class="card-body">
                            <div class="news-list">
                                {% for news_item in news %}
                                    <div class="news-item">
                                        <h3 class="titulo-noticia">{{ news_item.title }}</h3>
                                        <div class="cuerpo-noticia">{{ news_item.content|truncatewords:15|safe }}</div>
                                        <p><small>{% trans "Publicado el" %} {{ news_item.created_at }}</small></p>
                                        <a href="{% url 'news_detail' news_item.id %}" class="btn btn-primary btn-sm" role="button">{% trans "Leer más" %}</a>
                                    </div>
                                {% empty %}
                                    <p>{% trans "No hay noticias disponibles en este momento." %}</p>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para añadir publicaciones -->
<div class="modal fade" id="addPostModal" tabindex="-1" role="dialog" aria-labelledby="addPostModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="POST" action="{% url 'create_post' %}">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="addPostModalLabel">{% trans "Nueva Publicación" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="id_title" class="col-label">{% trans "Titulo:" %}</label>
                        <input type="text" name="title" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="id_content" class="col-label">{% trans "Contenido:" %}</label>
                        <textarea name="content" class="form-control"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{% trans "Cerrar" %}</button>
                    <button type="submit" class="btn btn-sm btn-primary">{% trans "Publicar" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock content %}

{% block footer %}
<!-- Pie de página personalizado si es necesario -->
{% endblock footer %}