{% extends base_template %}
<!-- Load Select2 CSS -->
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" /> -->

<!-- Load Select2 JS -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script> -->
{% block title %} My Custom Form {% endblock %}

{% block content %}
<!-- Load Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

<!-- Load Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<div class="container">
  <h2>Add a New Role</h2>
  <form method="POST" action="">
    {{ form.hidden_tag() }}
    <div class="form-group">
      <label for="free_text">Role Name</label>
      {{ form.role_name(class="form-control") }}
    </div>
    <div class="form-group">
      <label for="roles">Roles</label>
      {{ form.roles(class="form-control select2", multiple="multiple") }}
    </div>
    <div class="form-group">
      {{ form.submit(class="btn btn-primary") }}
    </div>
  </form>
</div>

<!-- Initialize Select2 -->
<script type="text/javascript">
  $(document).ready(function () {
    $('.select2').select2({
      placeholder: "Choose options",
      allowClear: true
    });
  });
</script>
{% endblock %}