{% extends "base.html" %}

{% block content %}
<div class="container">
    <h1>Busca de Diários Oficiais</h1>
    
    <form method="GET" action="{% url 'search_diarios' %}" class="mb-4">
        <div class="input-group">
            <input type="text" name="q" class="form-control" value="{{ query }}" placeholder="Digite sua busca...">
            <button type="submit" class="btn btn-primary">Buscar</button>
        </div>
    </form>
    
    {% if query %}
        <div class="mb-3">
            <h2>Resultados para "{{ query }}"</h2>
            <p>Encontrados {{ total }} resultados</p>
        </div>
        
        {% if results %}
            <div class="search-results">
                {% for result in results %}
                <div class="card mb-3">
                    <div class="card-header">
                        <h5>{{ result.tipo }} nº {{ result.numero }}</h5>
                        <p class="text-muted">Data: {{ result.data }}</p>
                    </div>
                    <div class="card-body">
                        {% if result.highlight %}
                            <div class="highlight-section mb-3">
                                <h6>Destaques:</h6>
                                <div class="highlight-content">{{ result.highlight|safe }}</div>
                            </div>
                        {% endif %}
                        
                        {% if result.highlighted_pages %}
                            <div class="highlighted-pages">
                                <h6>Páginas com o termo buscado:</h6>
                                <div class="accordion" id="pagesAccordion{{ result.id }}">
                                    {% for page in result.highlighted_pages %}
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
                                                    data-bs-target="#page{{ result.id }}_{{ page.number }}">
                                                Página {{ page.number }}
                                            </button>
                                        </h2>
                                        <div id="page{{ result.id }}_{{ page.number }}" class="accordion-collapse collapse" 
                                             data-bs-parent="#pagesAccordion{{ result.id }}">
                                            <div class="accordion-body">
                                                {{ page.content|safe }}
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                        
                        <div class="mt-3">
                            <a href="{{ result.link }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                Ver Diário Online
                            </a>
                            <a href="{% url 'diario_detail' result.id %}" class="btn btn-sm btn-outline-secondary">
                                Ver Detalhes
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            
            <!-- Paginação -->
            {% if total_pages > 1 %}
            <nav aria-label="Paginação">
                <ul class="pagination">
                    {% if page > 1 %}
                    <li class="page-item">
                        <a class="page-link" href="?q={{ query }}&page={{ page|add:'-1' }}&size={{ size }}">Anterior</a>
                    </li>
                    {% endif %}
                    
                    {% for i in total_pages|ljust:"5" %}
                        {% if i > 0 and i <= total_pages %}
                        <li class="page-item {% if i == page %}active{% endif %}">
                            <a class="page-link" href="?q={{ query }}&page={{ i }}&size={{ size }}">{{ i }}</a>
                        </li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if page < total_pages %}
                    <li class="page-item">
                        <a class="page-link" href="?q={{ query }}&page={{ page|add:'1' }}&size={{ size }}">Próxima</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
            
        {% else %}
            <div class="alert alert-info">
                Nenhum resultado encontrado para a sua busca.
            </div>
        {% endif %}
    {% endif %}
</div>

<style>
    .highlight-content em {
        background-color: #ffeeba;
        font-style: normal;
        padding: 2px;
        border-radius: 2px;
    }
    
    .accordion-body em {
        background-color: #ffeeba;
        font-style: normal;
        padding: 2px;
        border-radius: 2px;
    }
</style>
{% endblock %}