1{#
2  Copyright (c) 2024-2025, The Linux Foundation.
3  SPDX-License-Identifier: Apache-2.0
4#}
5
6<form class="filter-form" aria-label="Filter boards by name, architecture, and vendor">
7
8  <div class="form-group" style="flex-basis: 100%">
9    <label for="name">Name</label>
10    <input type="text" id="name"
11      placeholder='Name (or partial name) of the board, e.g. "reel board", "nucleo", &hellip;'
12      oninput="filterBoards()" />
13  </div>
14
15  <div class="form-group">
16    <label for="arch">Architecture</label>
17    <div class="select-container">
18      <select id="arch">
19        <option value="" disabled selected>Select an architecture</option>
20        <option value="nios2">Altera Nios II</option>
21        <option value="arm">ARM</option>
22        <option value="arm64">ARM 64</option>
23        <option value="mips">MIPS</option>
24        <option value="posix">POSIX</option>
25        <option value="riscv">RISC-V</option>
26        <option value="sparc">SPARC</option>
27        <option value="arc">Synopsys DesignWare ARC</option>
28        <option value="x86">x86</option>
29        <option value="xtensa">Xtensa</option>
30      </select>
31    </div>
32  </div>
33
34  <div class="form-group" style="flex-basis: 400px">
35    <label for="vendor">Vendor</label>
36    <div class="select-container">
37      <select id="vendor">
38        <option value="" disabled selected>Select a vendor</option>
39        {# Only show those vendors that have actual boards in the catalog.
40           Note: as sorting per vendor name is not feasible in Jinja, the option list is sorted in the JavaScript code later #}
41        {% for vendor in (boards | items | map(attribute='1.vendor') | unique ) -%}
42        <option value="{{ vendor }}">{{ vendors[vendor] }}</option>
43        {% endfor %}
44      </select>
45    </div>
46  </div>
47
48  <div class="form-group">
49    <label for="family">Family</label>
50    <select id="family" name="family" size="10" multiple></select>
51  </div>
52
53  <div class="form-group">
54    <label for="series">Series</label>
55    <select id="series" name="series" size="10" multiple></select>
56  </div>
57
58  <div class="form-group">
59    <label for="soc">SoC</label>
60    <select id="soc" name="soc" size="10" multiple></select>
61  </div>
62
63  <div class="form-group" style="flex-basis: 100%">
64    <label for="hw-capabilities">Supported Hardware Capabilities</label>
65    <div class="tag-container" id="tag-container">
66      <input list="tag-list" class="tag-input" id="tag-input"
67             placeholder="{% if hw_features_present -%}
68               Type a tag...
69             {%- else -%}
70               List of supported hardware capabilities is not available
71             {%- endif %}"
72             {% if not hw_features_present %}disabled{% endif %}>
73      <datalist id="tag-list"></datalist>
74    </div>
75  </div>
76
77</form>
78
79<div id="form-options" style="text-align: center; margin-bottom: 20px">
80  <button
81    id="reset-filters"
82    class="btn btn-info btn-disabled fa fa-times"
83    tabindex="0"
84    onclick="resetForm()">
85    Reset Filters
86  </button>
87  <button
88    id="toggle-compact"
89    class="btn btn-info fa fa-bars"
90    tabindex="0"
91    onclick="toggleDisplayMode(this)">
92    Switch to Compact View
93  </button>
94</div>
95
96<div id="nb-matches" style="text-align: center"></div>
97
98<div id="catalog">
99  {% for board_name, board in boards | items | sort(attribute='1.full_name') -%}
100  {% include "board-card.html" %}
101  {% endfor %}
102</div>
103
104<script>
105  socs_data = {{ socs | tojson }};
106</script>
107