{{ header }}

<section class="container-fluid">

  {{ breadcrumbs }}

  <div class="row">
    <div class="col-xs-12 col-md-3">
      {{ account }}
    </div>
    <div class="col-xs hidden-md-down">
      <div class="col-xs-12">
        <form id="FormExtract" method="get" action="{{ action }}">
          {{ text_operacao }}
          <select name="operacao">
            {% for operacoe in operacoes %}
              <option value="{{ operacoe.id }}" {{ operacoe.status }}>{{ operacoe.name }}</option>
            {% endfor %}
          </select>
          {{ text_periodo }}
          {% for range in ranges %}
            <input type="radio" class="js-range" name="range" value="{{ range.id }}" {{ range.status }}> {{ range.name }}
          {% endfor %}
          <input type="text" id="datainicial" class="mask-date" name="datainicial" value="{{ datainicial }}" placeholder="Data Inicial">
          <input type="text" id="datafinal" class="mask-date" name="datafinal" value="{{ datafinal }}" placeholder="Data Final">
          <input type="submit" name="Filtrar">
        </form>
        <a href="{{ action }}">{{ text_clear }}</a>
      </div>
      {% if extracts %}
        {% for extract in extracts %}
          <div class="border-gray bottom-padding-large left-padding-large top-margin-medium order-list-item">
            <div class="row no-space-xs">
              {{ extract.saldo }}
            </div>
          </div>
        {% endfor %}
        <div class="pagination top-padding-medium top-margin-medium">{{ pagination }}</div>
      {% else %}
        <div class="padding-large paper top-margin-medium flex flex-row center-xs">
          <span class="full-width text-center text-x-large text-dark top-margin-x-large">{{text_empty_extract}}</span>
          <a href="{{home}}" class="btn-default btn-medium top-margin-medium bottom-margin-x-large">
            <span>{{text_empty_extract_button}}</span>
          </a>
        </div>
      {% endif %}
    </div>
  </div>
</section>

{{ footer }}