{##
# @file orders.html
# Copyright (C) 2015 Pressa. All rights reserved.
#}

<!-- START | DASHBOARD/ORDERS -->
<div id="orders" class="container-fluid">
  <div class="row pad-top align-items-center">
    <div class="col-auto my-auto">
      <h5 class="mb-0"><span class="badge badge-primary" id="orders-list-count"></span></h5>
    </div>
    <div class="col">
      <div class="d-flex flex-wrap align-items-center justify-content-end" style="gap: 4px;">
        <!-- Fechas -->
        <div class="input-group date border border-secondary rounded-sm flex-nowrap" id="order-from" style="width: auto;">
          <input type="text" class="form-control form-control-sm"
                 id="order-from-input" readonly="true" style="background-color: white; min-width: 90px;" required>
          <div class="input-group-addon input-group-append">
            <div class="input-group-text" style="padding: 6px;">
              <i class="fa fa-solid fa-calendar-minus"></i>
            </div>
          </div>
        </div>
        <div class="input-group date border border-secondary rounded-sm flex-nowrap" id="order-to" style="width: auto;">
          <input type="text" class="form-control form-control-sm"
                 id="order-sddt-input" readonly="true" style="background-color: white; min-width: 90px;" required>
          <div class="input-group-addon input-group-append">
            <div class="input-group-text" style="padding: 6px;">
              <i class="fa fa-solid fa-calendar-plus"></i>
            </div>
          </div>
        </div>
        <!-- Estado -->
        <select class="form-control form-control-sm" data-width="150px" multiple data-live-search="false"
          data-size="8" data-style="btn-info" data-actions-box="false"
          data-placeholder="{{ lang['dashboard']['orders']['filters']['status_placeholder'] }}"
          title="{{ lang['dashboard']['orders']['filters']['status_placeholder'] }}"
          data-header="{{ lang['dashboard']['orders']['filters']['status_placeholder'] }}" id="orders-status">
          {% for s in lang['dashboard']['orders']['filters']['status'] %}
          <option value="{{ s.id }}">{{ s.name }}</option>
          {% endfor %}
        </select>
        <!-- Búsqueda -->
        <input type="text" class="form-control form-control-sm" id="orders-search-text"
          placeholder="{{ lang['dashboard']['orders']['table']['search_placeholder'] }}"
          style="max-width: 180px;" />
        <!-- Botones: flex-nowrap para que nunca se separen -->
        <div class="d-flex flex-nowrap" style="gap: 4px;">
          <button type="button" class="btn btn-success btn-sm" id="orders-search-submit" data-toggle="tooltip"
            data-placement="bottom" title="{{ lang['dashboard']['orders']['table']['search_tooltip'] }}"
            data-text="{{ lang['dashboard']['orders']['table']['search'] }}"
            data-loading-text="{{ lang['dashboard']['orders']['table']['search_loading'] }}">
            <span class="fa fa-solid fa-magnifying-glass" aria-hidden="true"></span>
            <span class="button-text">{{ lang['dashboard']['orders']['table']['search'] }}</span>
          </button>
          <button type="button" class="btn btn-primary btn-sm" id="orders-add" data-toggle="tooltip"
            data-placement="bottom" title="{{ lang['dashboard']['orders']['table']['create_tooltip'] }}">
            <span class="fa fa-solid fa-plus" aria-hidden="true"></span>
            {{ lang['dashboard']['orders']['table']['create'] }}
          </button>
          <button type="button" class="btn btn-secondary btn-sm" id="orders-triptypes" data-toggle="tooltip"
                  data-placement="bottom" title="Viajes genéricos (origen/destino)">
            <span class="fa fa-solid fa-route" aria-hidden="true"></span>
            Viajes
          </button>
          <button type="button" class="btn btn-info btn-sm" id="orders-export-excel" data-toggle="tooltip"
            data-placement="bottom" title="{{ lang['dashboard']['orders']['table']['excel_tooltip'] }}"
            data-text="{{ lang['dashboard']['orders']['table']['excel'] }}"
            data-loading-text="{{ lang['dashboard']['orders']['table']['excel_loading'] }}">
            <span class="fa fa-solid fa-file-excel" aria-hidden="true"></span>
            <span class="button-text">{{ lang['dashboard']['orders']['table']['excel'] }}</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-lg-12">
      <table id="orders-table" class="table table-hover table-condensed table-sm">
        <thead class="table-dark">
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
  {% include 'orders_modal.html' %}
  {% include 'orders_carrier_modal.html' %}
  {% include 'orders_event_modal.html' %}
  {% include 'orders_triptypes_modal.html' %}
  {% include 'orders_pasos_modal.html' %}
</div>
<!-- END | DASHBOARD/ORDERS -->