{% set formHidden = '' %}
{% if situacao is defined and situacao == 'Vago' %}
  {% set formHidden = 'hidden' %}

  <div id="removeDiv">
    <div class="col-md-12 m-3 d-flex">
      <span class="p-5 border rounded w-100 text-center">
        {% if status == 'Vendido' %}O imóvel foi vendido{% else %}O imóvel não está alugado nesse momento{% endif %}
      </span>
    </div>

    {% if status is defined and status != 'Vendido' %}
      <div class="col-md-12 mb-3 d-flex justify-content-end">
        <div class="demo-inline-spacing">
          <button type="button" class="btn btn-primary" id="visualizarFormAluguel">
            <span class="icon-base bx bx-plus icon-sm me-2"></span>Adicionar Aluguel
          </button>
        </div>
      </div>
    {% endif %}

  </div>
{% endif %}

<div class="row" id="listAluguelGroup" {{ formHidden }}>
  <div class="col-lg-12 mb-6 mb-xl-0">
    <div class="mt-4">
      <div class="row">
        <div class="col-md-2 col-12 mb-4 mb-md-0">
          <div class="list-group">
            <a
              class="list-group-item list-group-item-action active"
              id="list-aluguel-form-list"
              data-bs-toggle="list"
              href="#list-aluguel-form">
              Dados
            </a>

            {% set desabilita = idAluguel is not defined or not idAluguel %}
            <a
              class="list-group-item list-group-item-action {{ desabilita ? 'disabled text-muted' }}"
              id="navs-top-documento_aluguel-list"
              {{ desabilita ? '' : 'data-bs-toggle="list"' }}
              {{ desabilita ? '' : 'href="#navs-top-documento_aluguel"' }}>
              Documentos
            </a>

            <button
              class="list-group-item list-group-item-action finalizarLocacao {{ desabilita ? 'disabled text-muted' }}"
              id="navs-top-encerrar_aluguel-list"
              data-situacao="{{ situacao }}"
              data-nome="{{ nome }}"
              data-idimovel="{{ idImovel }}"
              data-idaluguel="{{ idAluguel ?? '' }}"
              >
              Encerrar
            </button>

            <a
              class="list-group-item list-group-item-action {{ desabilita ? 'disabled text-muted' }}"
              id="navs-top-renovar_aluguel-list"
              {{ desabilita ? '' : 'data-bs-toggle="list"' }}
              {{ desabilita ? '' : 'href="#list-renovar-aluguel-form"' }}>
              Renovar
            </a>

            <a
              class="list-group-item list-group-item-action {{ desabilita ? 'disabled text-muted' }}"
              id="navs-top-pagamentos_aluguel-list"
              {{ desabilita ? '' : 'data-bs-toggle="list"' }}
              {{ desabilita ? '' : 'href="#navs-top-pagamentos_aluguel"' }}>
              Pagamentos

              {% if (pagamentoAtrasado|default(0)) > 0 %}
                <span class="badgeButtonDireita" title="Meses em atraso">
                  {{ pagamentoAtrasado }}
                </span>
              {% endif %}
            </a>

          </div>
         
        </div>
        <div class="col-md-10 col-12">
          <div class="tab-content p-0">
            <div class="tab-pane fade show active" id="list-aluguel-form">
              {% include 'aluguel/formAluguel.html.twig' %}
            </div>

            {% if idAluguel is defined and idAluguel %}

              <div class="tab-pane fade" id="navs-top-documento_aluguel">
                {% include 'componentes/documentos.html.twig' with { documentos: documentoAluguel, id: idAluguel, tela: 'aluguel' } %}
              </div>

              <div class="tab-pane fade" id="list-renovar-aluguel-form">
                {% include 'aluguel/formAluguel.html.twig' with { isRenovacao: true } %}
              </div>

              <div class="tab-pane fade" id="navs-top-pagamentos_aluguel">
                {% include 'aluguel/pagamentoAluguel.html.twig' with { offCanva: false } %}
              </div>

            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>