{% extends "website/base/base.html" %}


{% block principal %}
<script>
    function change_page(page){
        $('#page').val(page).parents('form').submit();

    }
    var date_picker_options = {
        "dateFormat":"dd-mm-yy",
        showOn: "button",
        buttonImage: "{{ STATIC_URL }}images/agenda/icon_calendar.png",
        buttonImageOnly: true
    }
    $(function() {
        $( "#date_start, #date_end" ).datepicker(date_picker_options);
    });


    $(document).ready(function() {
        $('#bt_pesquisar').click(function(){
          $("#page").val(1).parents('form').submit();
        });
    });
</script>

<div>
    <div class="bread"><a href="{% url home-view %}">Arquidiocese de Braga</a> / <a href="{% url agenda-listview %}">Agenda</a></div>
    <div class="espacamento_noticia">
        <div class="titulos">Agenda</div>
        <div>
            <form class="pesquisa_instituicao" method="get">
                <input type="hidden" name="page" id="page" value="{{ page_obj.number }}" />
                <div class="noticia_conteudo">
                    Faça a Pesquisa na agenda de acordo com os parâmetros que pretende<br/>
                    Para visualizar os dados da Agenda, clicar sobre uma das opções de Consulta ou Clicar directamente num dia do calendário para visualizar o que está agendado para o dia ou adicionar algo na agenda.
                </div>
                <fieldset>
                    <legend>Pesquisa</legend>
                    <div>
                        <div>
                            <div class="left noticia_conteudo label_pesquisa">Pesquisa Livre</div>
                            <div class="left">
                                <input type="text" name="search" value="{{ search|default:"" }}" />
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div>
                            <div class="left noticia_conteudo label_pesquisa">Data de Início</div>
                            <div class="left">
                                <input name="date_start" id="date_start" type="text" value="{{ date_start|date:"d-m-Y" }}" style="margin-right: 3px;" />
                                <img src="{{ STATIC_URL }}images/agenda/calendar_remove.png" onclick="$('#date_start').val('');" width="16" height="16" border="0">
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div>
                            <div class="left noticia_conteudo label_pesquisa">Data de Fim</div>
                            <div class="left">
                                <input name="date_end" id="date_end" type="text" value="{{ date_end|date:"d-m-Y" }}" style="margin-right: 3px;"/>
                                <img src="{{ STATIC_URL }}images/agenda/calendar_remove.png" onclick="$('#date_end').val('');" width="16" height="16" border="0">
                            </div>
                            <div class="left"><input id="bt_pesquisar" type="button" value="pesquisar"/></div>
                            <div class="clear"></div>
                        </div>
                        <div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
        {% if is_searchable %}
            <div class="noticia_conteudo">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="resultado_agenda">
                    <thead>
                        <tr>
                            <td width="110"><strong>Nome</strong></td>
                            <td width="10"></td>
                            <td width="75"><strong>Data</strong></td>
                            <td width="10"></td>
                            <td width="40"><strong>Hora</strong></td>
                            <td width="10"></td>
                            <td width="200"><strong>Título e Descrição</strong></td>
                            <td width="10"></td>
                            <td width="100"><strong>Local</strong></td>
                        </tr>
                    </thead>
                    <tbody>
                        {% if object_list|length > 0 %}
                            {% for evento in object_list %}
                            <tr>
                                <td>{{ evento.entidade.titulo }}</td>
                                <td width="10"></td>
                                <td>
                                    {{ evento.data_inicio|date:"d-m-Y" }}
                                    {% if  evento.data_inicio|date:"Ymd" == evento.data_fim|date:"Ymd" %}{% else %}
                                        <br/>a<br/>{{ evento.data_fim|date:"d-m-Y" }}
                                    {% endif %}
                                </td>
                                <td width="10"></td>
                                <td>{{ evento.data_inicio|date:"H:i" }}<br/>a<br/>{{ evento.data_fim|date:"H:i" }}</td>
                                <td width="10"></td>
                                <td><span>{{ evento.titulo }}</span><br/>{{ evento.descricao }}</td>
                                <td width="10"></td>
                                <td>{{ evento.local.titulo }}</td>
                            </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="9">Não foram encontrados registos</td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
            {% with js_callback_name="change_page" %}
            {% include "website/base/pagination.html" %}
            {% endwith %}
        {% endif %}
        <div class="clear"></div>
    </div>
</div>

{% endblock principal %}