<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>Search Results - <%= env.COMPANY_NAME %></title>
    <meta charset="utf-8" />
    <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0' />
    <meta property="og:title" content="Search Results" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="<%= env.APPLICATION_URL %>" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <!-- Navigation -->
    <%- include('partials/navigation', {env: env}) %>

    <div class="columns p-0 m-0">
      <!-- Sidebar -->
      <div class="column is-2 has-background-light">
        <%- include('partials/searchSidebar', {
          Filters: context.filters,
          ModelYears: inventoryMetadata.ModelYears,
          Makes: inventoryMetadata.Makes,
        }) %>
      </div>

      <!-- Search Results -->
      <div class="column is-10 p-4">
        <!-- Listing Header -->
        <section class="hero is-link is-hidden-mobile">
          <div class="hero-body">
            <p class="title">
              <%= env.COMPANY_NAME %>
            </p>
            <p class="subtitle">
              Current Vehicle Inventory
              <% if (typeof(context.query) === "string") { %>
                &middot; <em><%= context.query %></em>
              <% } %>
            </p>
          </div>
        </section>

        <!-- Search Configurator -->
        <div class="columns p-0 m-0 py-3 is-vcentered">
          <div class="column is-6 p-0">
            <nav class="level">
              <div class="level-left" id="search-filter-tags">
                <div class="level-item">
                  <p class="subtitle is-7">
                    <strong>Search Filters:</strong>
                  </p>
                </div>
                <% if (context.filters.length > 0) { %>
                  <% context.filters.forEach(filter => { %>
                    <div class="level-item">
                      <div class="tags has-addons">
                        <span class="tag"><%= filter.value %></span>
                        <a class="tag is-delete" data-filter-key="<%= filter.key %>"></a>
                      </div>
                    </div>
                  <% }) %>
                <% } else { %>
                  <div class="level-item">
                    <div class="tags">
                      <span class="tag is-white">None</span>
                    </div>
                  </div>
                <% } %>
              </div>
            </nav>
          </div>
          <div class="column p-0">
            <div class="field is-horizontal is-pulled-right">
              <div class="field-body">
                <div class="field">
                  <div class="control has-icons-left">
                    <div class="select is-fullwidth">
                      <select id="search-filter-sort">
                        <option disabled <%=(!context.sort ? "selected" : "")%>>Sort By</option>
                        <option value="ModelYear" <%=(context.sort === "ModelYear" ? "selected" : "")%>>Model Year</option>
                        <option value="Make" <%=(context.sort === "Make" ? "selected" : "")%>>Make</option>
                        <option value="Odometer" <%=(context.sort === "Odometer" ? "selected" : "")%>>Mileage</option>
                        <option value="Price" <%=(context.sort === "Price" ? "selected" : "")%>>Price</option>
                      </select>
                    </div>
                    <span class="icon is-medium is-left">
                      <i class="fas fa-sort"></i>
                    </span>
                  </div>
                </div>
                <div class="field has-addons">
                  <p class="control">
                    <a
                      class="button"
                      title="Card View"
                      <%=(context.cardView === "card" ? "disabled" : "")%>
                      <%=(context.cardView !== "card" ? `href=${context.oppositeViewUrl}` : "")%>
                    >
                      <span class="icon is-small">
                        <i class="fas fa-border-all"></i>
                      </span>
                      <span>Card</span>
                    </a>
                  </p>
                  <p class="control">
                    <a
                      class="button"
                      title="List View"
                      <%=(context.cardView === "list" ? "disabled" : "")%>
                      <%=(context.cardView !== "list" ? `href=${context.oppositeViewUrl}` : "")%>
                    >
                      <span class="icon is-small">
                        <i class="fas fa-list"></i>
                      </span>
                      <span>List</span>
                    </a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Search Results -->
        <% if (inventory && inventory instanceof Array && inventory.length > 0) { %>
          <% if (context.cardView === "card") { %>
            <div class="columns is-multiline">
              <% inventory.forEach(vehicle => { %>
                <div class="column is-4">
                  <%- include('partials/searchCard', {
                    env: env,
                    context: {
                      page: "index",
                    },
                    vehicle
                  }) %>
                </div>
              <% }) %>
            </div>
          <% } else { %>
            <div class="table-container">
              <%- include('partials/searchTable', { inventory }) %>
            </div>
          <% } %>
        <% } else { %>
          <div class="notification is-warning is-light">
            <strong>Oops!</strong> No results found.
          </div>
        <% } %>

        <!-- Search Pagination -->
        <% if (inventory && context.pages > 0 && context.pagination instanceof Array) { %>
          <nav class="pagination" role="navigation" aria-label="pagination">
            <a
              class="pagination-previous <%=(!context.prevUrl ? "is-disabled" : "")%>"
              href="<%=context.prevUrl ? context.prevUrl : "#"%>"
            >
              Previous
            </a>
            <a
              class="pagination-next <%=(!context.nextUrl ? "is-disabled" : "")%>"
              href="<%=context.nextUrl ? context.nextUrl : "#"%>"
            >
              Next
            </a>
            <ul class="pagination-list">
              <% context.pagination.forEach(paginate => { %>
                <li>
                  <a
                    class="pagination-link <%=(paginate.current ? "is-current" : "")%>"
                    aria-label="Page <%=paginate.page%>"
                    href="<%=paginate.url%>"
                  >
                    <%=paginate.page%>
                  </a>
                </li>
              <% }) %>
            </ul>
          </nav>
        <% } %>
      </div>
    </div>

    <!-- Footer -->
    <%- include('partials/footer', {env: env}) %>

    <!-- Scripts -->
    <script src="/js/index.js"></script>
    <script src="/js/navigation.js"></script>
  </body>
</html>
