{% extends "global/Page.html" %}
{% load otree static %}

{% block scripts %}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script>

    <script>
        $(function () {
            $('#specialist_subjects').selectize({
                plugins: ['remove_button'],
                maxItems: 4,
                delimiter: ',',
                create: false,
                onChange: function(val) {
                    $('#id_misc_1').val(JSON.stringify(val));
               }
            });
        });
    </script>

{% endblock %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.min.css">
    <link href="{% static 'global/css/selectsize_custom.css' %}" rel="stylesheet"/>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
    <div class="wrapper">
        <div class="form-group" align="center">
            <label for="specialist_subjects">{{ form.misc_1.label|safe }}</label>
            <select id="specialist_subjects" name="specialist_subjects" multiple class="demo-default text-left" style="width:70%" placeholder="Select...">
                {% for n in specialist_subjects %}
                    <option value="{{ n }}">{{ n }}</option>
                {% endfor %}
            </select>
            {{ form.misc_1.errors }}
        </div>
        {{ form.misc_1.as_hidden  }}
        <button class="otree-btn-next btn btn-primary">Confirm</button>
    </div>
{% endblock %}