{% extends "base.html" %}
{% load i18n %}
{% load crispy_forms_tags cropping%}
{% load common_tags %}
{% load render_bundle from webpack_loader %}
{% load webpack_static from webpack_loader %}

{% block base_content %}

<div id="app2">

  <div class="actions btn-group float-right btn-group-sm" role="group">
    <a v-if="is_pesquisa" v-on:click="pesquisaChange" class="btn btn-primary text-white">Listar Parlamentar</a>
    <a v-else v-on:click="pesquisaChange" class="btn btn-outline-primary text-info">Pesquisar Parlamentar</a>
    {% if not request.user.is_anonymous  %}
      <a href="{% url 'sapl.parlamentares:vincular_parlamentar' %}" class="btn btn-outline-primary">Vincular Parlamentar</a>
    {% endif %}
  {% block more_buttons %}{% endblock more_buttons %}
  </div>
<div class="clearfix"></div>
  <!--Pesquisa parlamentares-->
  <div v-if="is_pesquisa">
    <h2>Pesquisar Parlamentar</h2>
    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">Pesquisar</span>
      </div>
      <input v-model="nome_pesquisa" type="text" class="form-control" aria-label="Pesquisa" aria-describedby="inputGroup-sizing-sm">
    </div>
  </div>
  <!--Lista parlamentares--> 
  <div v-else>
  <fieldset class="form-group">
    <legend>Selecione o Período</legend>
    <form method="GET">
        <select @change="getParlamentares" class="form-control" v-model="legislatura_selecionada">
          <option v-for="option in legislaturas" v-bind:value="option.id">
            [[ option.__str__ ]]
          </option>
        </select>
    </form>
  </fieldset>
  <br/>
    <div class="float-right">
      <input @change="checkTitularAtivo" class="form-check-input" type="checkbox" id="filter_ativo" v-model="filter_ativo">
      <label class="form-check-label" for="filter_ativo">Apenas Ativos</label>
      <input @change="checkTitularAtivo" class="form-check-input" type="checkbox" id="filter_titular" v-model="filter_titular">
      <label class="form-check-label" for="filter_titular">Apenas Titulares</label>
     </div>
  </div>

  <div class="container-table lista-parlamentares">
      <div class="result-count">Total de Parlamentares: <strong>[[size_parlamentares]]</strong></div>
      <table class="table table-striped table-hover table-link-ordering">
        <thead>
          <tr>
            <th>Parlamentar</th>
            <th>Partido</th>
            <th>Ativo?</th>
            <th v-if="!is_pesquisa" >Titular?</th>
          </tr>
        </thead>
          <tbody v-for="parlamentar in visible_parlamentares">
          <tr>
              <th>
                <img class="img-fluid img-thumbnail" style="width: 128px; height: auto;" v-bind:src="parlamentar.fotografia_cropped" @error="(() => parlamentar.fotografia = '')"/>
                 <a v-bind:href="'/parlamentar/'+parlamentar.id">[[ parlamentar.nome_parlamentar]]</a>
              </th>
              <th>
                [[ parlamentar.partido ]]
              </th>
              <th>
                <p v-if="parlamentar.ativo">Sim</p>
                <p v-else>Não</p>
              </th>
              <th v-if="!is_pesquisa">
                <p>[[ parlamentar.titular]]</p>
              </th>
          </tr>
          </tbody>
      </table>
    </div>

{% endblock base_content %}


{% block webpack_loader_css %}
    {{ block.super }}
    {% render_bundle 'parlamentar' 'css' %}
{% endblock %}

{% block webpack_loader_js %}    
    {% render_chunk_vendors 'js' %}
    {% render_bundle  'global' 'js' %}  
    {% render_bundle 'parlamentar' 'js' %}
{% endblock %}