nav-aside.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <form action="{{ base }}/" method="get" autocomplete="off" novalidate>
  2. <div class="subheader mb-2">Category</div>
  3. {% assign items = "Games,Clothing,Jewelery,Toys" | split: "," %}
  4. <div class="list-group list-group-transparent mb-3">
  5. {% for item in items %}
  6. <a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}" href="#">
  7. {{ item }}
  8. <small class="text-secondary ms-auto">{{ forloop.index | random_number: 11, 200 }}</small>
  9. </a>
  10. {% endfor %}
  11. </div>
  12. <div class="subheader mb-2">Rating</div>
  13. {% assign items = "5 stars,4 stars,3 stars,2 and less stars" | split: "," %}
  14. <div class="mb-3">
  15. {% for item in items %}
  16. <label class="form-check">
  17. <input type="radio" class="form-check-input" name="form-stars" value="{{ item | escape }}"{% if forloop.first %} checked{% endif %}>
  18. <span class="form-check-label">{{ item }}</span>
  19. </label>
  20. {% endfor %}
  21. </div>
  22. <div class="subheader mb-2">Tags</div>
  23. {% assign items = "business,evening,leisure,party" | split: "," %}
  24. <div class="mb-3">
  25. {% for item in items %}
  26. <label class="form-check">
  27. <input type="checkbox" class="form-check-input" name="form-tags[]" value="{{ item | escape }}"{% if forloop.first %} checked{% endif %}>
  28. <span class="form-check-label">{{ item }}</span>
  29. </label>
  30. {% endfor %}
  31. </div>
  32. <div class="subheader mb-2">Price</div>
  33. <div class="row g-2 align-items-center mb-3">
  34. <div class="col">
  35. {% include "ui/form/input-group.html" prepend="$" placeholder="from" value="3" %}
  36. </div>
  37. <div class="col-auto">—</div>
  38. <div class="col">
  39. {% include "ui/form/input-group.html" prepend="$" placeholder="to" %}
  40. </div>
  41. </div>
  42. <div class="subheader mb-2">Shipping</div>
  43. <div>
  44. <select name="" class="form-select">
  45. <option>United Kingdom</option>
  46. <option>USA</option>
  47. <option>Germany</option>
  48. <option>Poland</option>
  49. <option>Other…</option>
  50. </select>
  51. </div>
  52. <div class="mt-5">
  53. {% include "ui/button.html" text="Confirm changes" color="primary" block=true element="button" %}
  54. {% include "ui/button.html" text="Reset to defaults" color="link" block=true %}
  55. </div>
  56. </form>