{% load template_getattr %}

<div class="panel-group" id="accordion-{{pre}}assessment">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-{{pre}}assessment" href="#{{pre}}-assessment" aria-expanded="true">Submit {{type}} Skills Assessment</a>
            </h4>
        </div>
        <div id="{{pre}}-assessment" class="panel-collapse collapse in" aria-expanded="true">
            <div class="panel-body">
                <form action="{% url 'musictherapy:save_measurables' user.id %}" method="post">
                    {% csrf_token %}
                    {% for domain, measurables in measurables.items %}
                        <div class="col-md-12">
                            <h3>{{domain}}</h3>
                        </div>
                        {% for measurable in measurables %}
                        <div class="col-md-12" style="padding: 2px">
                            <div class="col-md-6">
                                <label class="control-label" style="padding-top: 5px">{{measurable.name}}</label>
                            </div>
                            <div class="col-md-6">
                                {% with response=latest|getattrib:measurable.pk %}
                                <select class="select form-control" name="{{measurable.pk}}">
                                    <option value=-1 {% if response and response.value == -1 %} selected="selected" {% endif %}>Not Measured</option>
                                    <option value=0 {% if response and response.value == 0 %} selected="selected" {% endif %}>None/Never</option>
                                    <option value=1 {% if response and response.value == 1 %} selected="selected" {% endif %}>Low/Rarely/Poor</option>
                                    <option value=2 {% if response and response.value == 2 %} selected="selected" {% endif %}>Medium/Sometimes/Good</option>
                                    <option value=3 {% if response and response.value == 3 %} selected="selected" {% endif %}>High/Always/Very Good</option>
                                </select>
                                {% endwith %}
                            </div>
                        </div>
                        {% endfor %}
                    {% endfor %}
                    <div class="controls col-lg-6">
                        <label class="control-label" style="padding-top: 5px">Notes</label>
                    </div>
                    <div class="controls col-lg-6">
                        <textarea class="textarea form-control" cols="40" name="{{pre}}_measurablesnotes" rows="10" spellcheck="true" style="z-index: auto; position: relative; line-height: 20px; font-size: 14px; transition: none; background: transparent !important;">{{ latest.note.note }}</textarea>
                    </div>
                    <input type="submit" name="submit" value="Save" />
                    <input type="hidden" name="redirect" value="{{pre}}"/>
                </form>
            </div>
        </div>
    </div>
</div>