selectize plugin, sidenav init

pages/_includes/forms/form-elements-2.html

@@ -1,5 +1,3 @@
-
-
 <div class="mb-3">
    <label class="form-label">Username</label>
    {% include ui/input-group.html prepend="@" placeholder="username" %}
@@ -42,38 +40,21 @@
 
 <div class="mb-3">
    <label class="form-label">Tags</label>
-   <input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
+   {% include ui/form/selectize.html key="tags" %}
+
 </div>
 
 <div class="mb-3">
-   <label class="form-label">Beast</label>
-   <select name="beast" id="select-beast" class="form-select">
-      <option value="1">Chuck Testa</option>
-      <option value="4">Sage Cattabriga-Alosa</option>
-      <option value="3">Nikola Tesla</option>
-   </select>
+   <label class="form-label">Top person</label>
+   {% include ui/form/selectize.html key="users" %}
 </div>
 
 <div class="mb-3">
    <label class="form-label">Users list</label>
-   <select name="user" id="select-users" class="form-select">
-      {% for user in site.data.people limit: 10 %}
-      <option value="{{ forloop.index }}" data-data='{"image": "{{ user.photo }}"}'>
-         {{ user.first_name }} {{ user.last_name }}
-      </option>
-      {% endfor %}
-   </select>
+   {% include ui/form/selectize.html key="people" %}
 </div>
 
 <div class="mb-3">
    <label class="form-label">Countries</label>
-   <select name="country" id="select-countries" class="form-select">
-      <option value="br" data-data='{"image": "{{ site.base }}/assets/images/flags/br.svg"}'>Brazil</option>
-      <option value="cz" data-data='{"image": "{{ site.base }}/assets/images/flags/cz.svg"}'>Czech Republic
-      </option>
-      <option value="de" data-data='{"image": "{{ site.base }}/assets/images/flags/de.svg"}'>Germany
-      </option>
-      <option value="pl" data-data='{"image": "{{ site.base }}/assets/images/flags/pl.svg"}' selected>Poland
-      </option>
-   </select>
+   {% include ui/form/selectize.html key="countries" %}
 </div>