1{#
2  Copyright (c) 2024, 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</form>
64
65<div id="form-options" style="text-align: center; margin-bottom: 20px">
66  <button
67    id="reset-filters"
68    class="btn btn-info btn-disabled fa fa-times"
69    tabindex="0"
70    onclick="resetForm()">
71    Reset Filters
72  </button>
73  <button
74    id="toggle-compact"
75    class="btn btn-info fa fa-bars"
76    tabindex="0"
77    onclick="toggleDisplayMode(this)">
78    Switch to Compact View
79  </button>
80</div>
81
82<div id="nb-matches" style="text-align: center"></div>
83
84<div id="catalog">
85  {% for board_name, board in boards | items | sort(attribute='1.full_name') -%}
86  {% include "board-card.html" %}
87  {% endfor %}
88</div>
89
90<script>
91  socs_data = {{ socs | tojson }};
92</script>
93