{#
  Copyright (c) 2024-2025, The Linux Foundation.
  SPDX-License-Identifier: Apache-2.0
#}

<form class="filter-form" aria-label="Filter boards & shields by name, architecture, and vendor">

  <div class="form-group" style="flex-basis: 60%">
    <label for="name">Name</label>
    <input type="text" id="name"
      placeholder='Name (or partial name) of the board/shield, e.g. "reel board", "nucleo", &hellip;'
      oninput="filterBoards()" />
  </div>

  <div class="form-group">
    <label>Showing</label>
    <div class="visibility-toggles">
      <div class="toggle-group">
        <input type="checkbox" id="show-boards" checked>
        <label for="show-boards" class="toggle-label">
          <span class="toggle-switch"></span>
          <span class="toggle-text">Boards</span>
        </label>
      </div>
      <div class="toggle-group">
        <input type="checkbox" id="show-shields" checked>
        <label for="show-shields" class="toggle-label">
          <span class="toggle-switch"></span>
          <span class="toggle-text">Shields</span>
        </label>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="arch">Architecture</label>
    <div class="select-container">
      <select id="arch">
        <option value="" disabled selected>Select an architecture</option>
        {% for arch_name, arch in archs | items | sort(attribute='1.full_name') -%}
        <option value="{{ arch_name }}">{{ arch.full_name }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <div class="form-group" style="flex-basis: 400px">
    <label for="vendor">Vendor</label>
    <div class="select-container">
      <select id="vendor">
        <option value="" disabled selected>Select a vendor</option>
        {# Only show those vendors that have actual boards or shields in the catalog.
           Note: as sorting per vendor name is not feasible in Jinja, the option list is sorted in the JavaScript code later #}
        {% set board_vendors = boards | items | map(attribute='1.vendor') | unique | list %}
        {% set shield_vendors = shields | items | map(attribute='1.vendor') | unique | list %}
        {% for vendor in (board_vendors + shield_vendors) | unique -%}
        <option value="{{ vendor }}">{{ vendors[vendor] }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <div class="form-group">
    <label for="family">Family</label>
    <select id="family" name="family" size="10" multiple></select>
  </div>

  <div class="form-group">
    <label for="series">Series</label>
    <select id="series" name="series" size="10" multiple></select>
  </div>

  <div class="form-group">
    <label for="soc">SoC</label>
    <select id="soc" name="soc" size="10" multiple></select>
  </div>

  <div class="form-group" style="flex-basis: 100%">
    <label for="tag-input">Supported Hardware Capabilities</label>
    <div class="tag-container" id="tag-container">
      <input list="tag-list" class="tag-input" id="tag-input"
             placeholder="{% if hw_features_present -%}
               Type a tag...
             {%- else -%}
               List of supported hardware capabilities is not available
             {%- endif %}"
             {% if not hw_features_present %}disabled{% endif %}>
      <datalist id="tag-list"></datalist>
    </div>
  </div>

</form>

<div id="form-options" style="text-align: center; margin-bottom: 20px">
  <button
    id="reset-filters"
    class="btn btn-info btn-disabled fa fa-times"
    tabindex="0"
    onclick="resetForm()">
    Reset Filters
  </button>
  <button
    id="toggle-compact"
    class="btn btn-info fa fa-bars"
    tabindex="0"
    onclick="toggleDisplayMode(this)">
    Switch to Compact View
  </button>
</div>

<div id="nb-matches" style="text-align: center"></div>

<div id="catalog">
  {% for board_name, board in boards | items | sort(attribute='1.full_name') -%}
  {% include "board-card.html" %}
  {% endfor %}

  {% for shield_name, shield in shields | items | sort(attribute='1.full_name') -%}
  {% include "shield-card.html" %}
  {% endfor %}
</div>

<script>
  socs_data = {{ socs | tojson }};
</script>
