<div class="modal fade modal-wide" tabindex="-1" id="painel_controle_colaborador_modal" aria-labelledby="painelLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">

      <div class="modal-header d-flex justify-content-between align-items-center">
        <h6 class="m-0" style="color:#FF5403;">Painel de Controle do Colaborador</h6>
        <button type="button" class="btn btn-outline-danger btn-sm" data-bs-dismiss="modal">Fechar</button>
      </div>
        <!---CAMPOS HIDDEN-->
        <input type="hidden" id="painel_colaborador_pk">
      <div class="modal-body">

        <!-- Cabeçalho do colaborador -->
        <div class="row align-items-start mb-3">
          <!-- Foto -->
          <div class="col-md-2 text-center">
            <div class="border rounded d-flex align-items-center justify-content-center" 
                 style="width: 80px; height: 80px; margin: 0 auto;">
                <span id='painel_foto_colaborador'></span>
            </div>
            <small class="text-muted">Foto</small>
          </div>

          <!-- Dados -->
          <div class="col-md-10">
            <div class="row">
              <div class="col-md-6">
                <p class="mb-1"><strong>Nome:</strong> <span id="painel_ds_colaborador">—</span></p>
                <p class="mb-1"><strong>CPF:</strong> <span id="painel_ds_cpf">—</span></p>
                <p class="mb-1"><strong>Status RH:</strong> <span id="painel_ic_status_rh">—</span></p>
                <p class="mb-1"><strong>Status App:</strong> <span id="painel_ic_status_app">—</span></p>
              </div>
              <div class="col-md-6">
                <p class="mb-1"><strong>Posto de Trabalho:</strong> <span id="painel_ds_lead">—</span></p>
                <p class="mb-1"><strong>Turno:</strong> <span id="painel_ds_turno">—</span></p>
                <p class="mb-1"><strong>Horário:</strong> <span id="painel_escala">—</span></p>
              </div>
            </div>
          </div>
        </div>

        <hr>

        <!-- Ícones de ações -->
        <div class="row text-center mt-3">
          <div class="col">
            <div class="border rounded p-3 mb-2">
              <i class="bi bi-person-lines-fill acessarFicha" style="font-size: 2rem;cursor:pointer"></i>
            </div>
            <small>Acessar Ficha<br>Colaborador</small>
          </div>

          <div class="col">
            <div class="border rounded p-3 mb-2">
              <i class="bi bi-calendar2-week" style="font-size: 2rem;"></i>
            </div>
            <small>Escalas</small>
          </div>

          <div class="col">
            <div class="border rounded p-3 mb-2">
              <i class="bi bi-watch" style="font-size: 2rem;"></i>
            </div>
            <small>Reloginho</small>
          </div>

          <div class="col">
            <div class="border rounded p-3 mb-2">
              <i class="bi bi-file-earmark-text" style="font-size: 2rem;"></i>
            </div>
            <small>Folha de Ponto</small>
          </div>

          <div class="col">
            <div class="border rounded p-3 mb-2">
              <i class="bi bi-folder2" style="font-size: 2rem;"></i>
            </div>
            <small>Documentos</small>
          </div>
        </div>

        <div class="row text-center mt-4">
          <div class="col">
            <div class="border rounded p-3 mb-2">
              <i class="bi bi-bar-chart-line" style="font-size: 2rem;"></i>
            </div>
            <small>Relatórios</small>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
