{% extends "layout.html" %}
{% load i18n %}

{% 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">
                                    <h5 class="card-title">{{ post.title }}</h5>
                                    <p>{{ post.content }}</p>
                                    <small><strong>{% trans "Publicado por:" %}</strong> {{ post.author }}</small>
                                    <br>
                                    {% if post.author == current_scout %}
                                        <button type="button" class="btn btn-sm btn-secondary btn-agricarm-edit" data-bs-toggle="modal" data-bs-target="#editPostModal{{ post.id }}">{% trans "Editar" %}</button>
                                        <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deletePostModal{{ post.id }}">{% trans "Eliminar" %}</button>
                                    {% endif %}
                                    <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#addCommentModal{{ post.id }}"><i class="bi bi-chat"></i> {% trans "Comentar" %}</button>


                                    <!-- 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>
                                                            {{ post_form.title }}
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="id_content" class="col-label">{% trans "Contenido:" %}</label>
                                                            {{ post_form.content }}
                                                        </div>
                                                        {{ post_form.author }}
                                                    </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-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>
                                                            {{ comment_form.content }}
                                                        </div>
                                                        <div class="form-group">
                                                            <!-- Campo oculto para el autor -->
                                                            <input type="hidden" name="author" value="{{ scout_id }}">
                                                            <input type="hidden" name="post" value="{{ post.id }}">
                                                        </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 -->
                                    <ul class="list-group comments mt-3">
                                        {% for comment in post.comments.all %}
                                            <li class="list-group-item">
                                                <p>{{ comment.content }}</p>
                                                <small><strong>Comentado por:</strong> {{ comment.author }}</small>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </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 }} <!-- Muestra un extracto de 30 palabras -->
                                            <p><small>{% trans "Publicado el" %} {{ news_item.created_at }}</small></p></div>
                                            <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 'add_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>
                            {{ post_form.title }}
                        </div>
                        <div class="form-group">
                            <label for="id_content" class="col-label">{% trans "Contenido:" %}</label>
                            {{ post_form.content }}
                        </div>
                        <div class="form-group">
                            <!-- Campo oculto para el autor -->
                            <input type="hidden" name="author" value="{{ scout_id }}">
                        </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 %}


{% endblock footer %}