Código HTML Estructura Taxi Directorio - OV

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<div class="header-directory">
  <h1>Directorio de Taxistas</h1>
  <div class="stats">
      <i class="fas fa-users"></i>
      Total de taxistas: <span id="taxiCount">0</span>
  </div>
</div>

<div id="error-message"></div>

<div class="filters">
  <div class="search-container">
      <i class="fas fa-search"></i>
      <input type="text"
             id="searchInput"
             class="search-input"
             placeholder="Buscar por nombre, unidad o zona...">
  </div>
  <div class="controls">
      <select id="sortSelect">
          <option value="nombre">Ordenar por nombre</option>
          <option value="unidad">Ordenar por unidad</option>
          <option value="zona">Ordenar por zona</option>
      </select>
      <select id="filterStatus">
          <option value="todos">Todos los estados</option>
          <option value="disponible">Disponibles</option>
          <option value="ocupado">Ocupados</option>
      </select>
  </div>
</div>

<div class="loading-spinner" id="loadingSpinner">
  <i class="fas fa-spinner"></i>
</div>

<div class="taxi-grid" id="taxiList">
  <!-- Los taxistas se cargarán aquí dinámicamente -->
</div>

<div class="pagination" id="pagination">
  <button id="prevPage" disabled>
      <i class="fas fa-chevron-left"></i> Anterior
  </button>
  <span class="page-info" id="pageInfo">Página 1</span>
  <button id="nextPage">
      Siguiente <i class="fas fa-chevron-right"></i>
  </button>
</div>