ask.html

{% extends 'layouts/base.html' %} {% load static %} {% block content %}
<h1>New Question</h1>
<div class="flex flex-column">
  {% if form.errors %}
  <div class="row">
    <div class="alert alert-danger" role="alert">

      {% for field, errors in form.errors.items %}
        {% for error in errors %}
          <p>{{ field }}: {{ error }}</p>
        {% endfor %}
      {% endfor %}
    </div>
  </div>
  {% endif %}
  <form method="post" enctype='multipart/form-data'>
    {% csrf_token %}
    <div class="row mb-3">
      <div class="col-1">Title</div>
      <div class="col-9">
        <input type="text" name="title" class="form-control" value="{{ form.title.value|default:'' }}" />
      </div>
    </div>

    <div class="row mb-3">
      <div class="col-1">Text</div>
      <div class="col-9">
        <textarea class="form-control" name="text">{{ form.text.value|default:'' }}</textarea>
      </div>
    </div>

    <div class="row mb-3">
      <div class="col-1">Image</div>
      <div class="col-9">
        <input class="form-control" type="file" name="image"></input>
      </div>
    </div>

    <div class="row mb-3">
      <div class="col-1">Tags</div>
      <div class="col-9">
        <select
          name="tags"
          data-multiple="true"
          data-replace="jselect"
          data-locale="en"
          data-search="true"
          data-placeholder="Select tags"
          id="tags_select"
        >
          <optgroup label="All tags">
            {% for tag in all_tags %}
            <option value="{{ tag.slug }}" data-img="{{ tag.bootstrap_icon }}">{{ tag.title }}</option>
            {% endfor %}
          </optgroup>
        </select>
      </div>
    </div>

    <div class="row mt-5">
      <div class="col-4">
        <button class="btn btn-success" type="submit">
          <i class="bi-check-lg"></i> Ask!
        </button>
      </div>
    </div>
  </form>
</div>
<script src="{% static 'js-select' %}/select.min.js"></script>
{% endblock %}