{% import "bootstrap5/form.html" as wtf %}
{% extends "templates/base.html" %}

{% block scripts %}
{{super()}}
<script src="{{ url_for('static', filename='js/chosen.jquery.min.js') }}"></script>
<script type="text/javascript">
  $(function() {
    // initialize Chosen jQuery plugin
    $(".chosen-select").chosen({width: '100%'});
  });
</script>
{% endblock %}

{%- block styles %}
  {{ super() }}
  <link href="{{ url_for('static', filename='css/bootstrap-chosen.css') }}" rel="stylesheet">
{%- endblock styles %}

{% block title %}{{ title }}{% endblock %}
{% block container %}
  <h1>{{ title }}</h1>

  <form class="form form-horizontal" action="{{ action }}" method="post">
    {% if method != 'POST' %}
      <input type="hidden" name="_method" value="{{method}}" />
    {% endif %}
    {{ form.csrf_token }}

    {{ wtf.render_field(form.group_id, form_type="horizontal", horizontal_columns=('sm', 2, 5), class="chosen-select") }}
    {{ wtf.render_field(form.title, form_type="horizontal", horizontal_columns=('sm', 2, 5)) }}
    {{ wtf.render_field(form.description, form_type="horizontal", horizontal_columns=('sm', 2, 5)) }}

    {{ wtf.render_field(form.submit, class="col-sm-offset-2 btn btn-primary") }}
  </form>
{% endblock %}
