{% set enabled__statuses_for_attendance = getAppSetting('attendance_enable_status') %}

{% if enabled__statuses_for_attendance is iterable %}
    {% for key,user in __user_list %}
        <div class="col-lg-6 col-md-6 col-sm-12  root__att__b"
             data-replace-ref="ref____{{ key }}_{{ 'now'|date('s') }}" id="user___{{ user.userID }}"
             data-ref="{{ user.userID }}">

            {% if user.attendance_ref %}
                <input type="hidden" name="r___ref_re[]" value="{{ user.attendance_ref }}">
            {% endif %}

            <form>
                {# mark attendance block #}
                <div class="user-box-item flex---dispaly">
                    <div class="user-img user-box-left width-15pr">
                        {{ user_avatar(user.userID)|raw }}
                    </div>
                    <div class="user-content user-box-left width-40pr">
                        <ul class="list-unstyled">
                            <li>
                                <div class="user-circle-icon">
                                    {{ user.attendance_ref ?  user.attendance_status_type == 1 ? '<i class="fa fa-check-circle green-color"></i>' : '<i class="fa fa-times-circle red-color-"></i>'  : '<i class="fa fa-question-mark"></i>' }}
                                </div>
                            </li>
                            <li>
                                <div>
                                    <strong>{{ user.attendance_ref ?  user.attendance_status_name : 'Not Marked'|trans }}</strong>
                                </div>
                                <div class="user-online">
                                    {#you 3m ago#}
                                    &nbsp;{{ user.attendance_ref ?  user.datetime_in|date('h:i') : '---' }}
                                </div>
                            </li>

                            {% if getAppSetting('show_last_attendances') == 'on' %}
                                <li class="kt-list-icon-box-item">
                                    <div class="kt-list-icon-student-right">
                                        <i class="fa fa-check-circle"></i><i class="fa fa-check-circle"></i><i
                                                class="fa fa-check-circle"></i><i class="fa fa-check-circle"></i><i
                                                class="fa fa-check-circle"></i><i class="fa fa-check-circle"></i>
                                    </div>
                                </li>
                            {% endif %}

                        </ul>
                    </div>
                    <p class="user-paragraph">
                        <strong> {{ user.fName }} {{ user.lname }}</strong>
                    </p>
                    <div class="user-box-left text-right width-60pr">
                        <div class="form-group">
                            {# attendance status radio buttons #}
                            <div class="kt-radio-inline">

                                {#attendance status#}

                                {% for key, status in attendance__status %}

                                    {#if these status are enabled form the setttings.#}
                                    {% if in_array(status.id, enabled__statuses_for_attendance) and key < 3 %}

                                        <label class="kt-radio">
                                            <input type="radio" name="__attendance__status[]" class="pro___s"
                                                   data-value="{{ status.id }}"
                                                   value="{{ status.id }}" {{ user.attendance_ref  ?  user.attendance_status_id == status.id ? 'checked="checked"' }}>

                                            {% if status.id == '1' %}
                                                <span class="kt-present-student"></span>
                                            {% elseif status.id == '3' %}
                                                <span class="kt-leave-student"></span>
                                            {% else %}
                                                <span></span>
                                            {% endif %}

                                            <strong class="kt-label-name">{{ status.name }}</strong>
                                        </label>
                                    {% endif %}

                                {% endfor %}

                            </div>
                            {# right top action button #}
                            <div class="dropdown dropdown-inline">
                                {# Open bottom dropdown. #}
                                <button type="button" class="btn btn-clean btn-sm btn-icon btn-icon-md collapsed"
                                        data-toggle="collapse" aria-expanded="false" aria-controls="__{{ key }}"
                                        data-target="#__{{ key }}">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px"
                                         viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect id="bound" x="0" y="0" width="24" height="24"></rect>
                                            <path d="M3,12 C3,12 5.45454545,6 12,6 C16.9090909,6 21,12 21,12 C21,12 16.9090909,18 12,18 C5.45454545,18 3,12 3,12 Z"
                                                  id="Shape" fill="#000000" fill-rule="nonzero"
                                                  opacity="0.3"></path>
                                            <path d="M12,15 C10.3431458,15 9,13.6568542 9,12 C9,10.3431458 10.3431458,9 12,9 C13.6568542,9 15,10.3431458 15,12 C15,13.6568542 13.6568542,15 12,15 Z"
                                                  id="Path" fill="#000000" opacity="0.3"></path>
                                        </g>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                {# Collapse body to ask check in and check out time .#}
                <div id="__{{ key }}" class="user-box-item collapse" aria-labelledby="" data-parent="">

                    <div class="row">
                        {#attendance status#}
                        {% for key, status in attendance__status %}
                            {#                            if these status are enabled form the setttings.#}
                            {% if in_array(status.id, enabled__statuses_for_attendance) and key > 2 %}

                                <label class="kt-radio">
                                    <input type="radio" name="__attendance__status[]" class="pro___s"
                                           data-value="{{ status.id }}"
                                           value="{{ status.id }}" {{ user.attendance_ref  ?  user.attendance_status_id == status.id ? 'checked="checked"' }}>

                                    {% if status.id == '1' %}
                                        <span class="kt-present-student"></span>
                                    {% elseif status.id == '3' %}
                                        <span class="kt-leave-student"></span>
                                    {% else %}
                                        <span class="kt-absent-student"></span>
                                    {% endif %}

                                    <strong class="kt-label-name"> &nbsp; {{ status.name }}</strong>
                                </label>
                            {% endif %}

                        {% endfor %}
                    </div>

                    <hr/>

                    <label for="a___notes[]"> {{ 'Notes' | trans }}</label>
                    <input type="text" placeholder="{{ 'Notes'|trans }}" name="a___notes[]" maxlength="255"
                           value="{{ user.attendance_ref ? user.comments }}" class="form-control">

                    <hr/>

                    <div class="row">
                        {#add in date#}
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <label>{{ 'Check in date'|trans }}</label>
                            <input type="text" class="simpleDatePicker form-control"
                                   placeholder="{{ 'Check in date'|trans }}" name="in___date[]"
                                   value="{{ user.attendance_ref ? user.datetime_in|date('d-M-y') : in_date ? in_date|date("d-M-y") :  'now'|date("d-M-y") }} ">
                        </div>

                        {#in time#}
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <label>{{ 'Check in time'|trans }}</label>
                            <input type="text" class="simpleTimePicker form-control"
                                   placeholder="{{ 'Check in time'|trans }}" name="in__time[]"
                                   value="{{ user.attendance_ref ? user.datetime_in|date('g:i') : 'now'|date("g:i") }} ">
                        </div>
                    </div>

                    <div class="row">
                        {#add out date#}
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <label>{{ 'Check out date'|trans }}</label>
                            <input type="text" class="simpleDatePicker form-control"
                                   placeholder="{{ 'Check out date'|trans }}" name="out__date[]"
                                   value="{{ user.attendance_ref ? user.datetime_out|date('d-M-y') : in_date ? in_date|date("d-M-y") :  'now'|date("d-M-y") }} ">
                        </div>

                        {# out time#}
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <label>{{ 'Check out time'|trans }}</label>
                            <input type="text" class="simpleTimePicker form-control"
                                   placeholder="{{ 'Check out time'|trans }}" name="out_time[]"
                                   value="{{ user.attendance_ref ? user.datetime_out|date('g:i') : 'now'|date("g:i") }}">
                        </div>
                    </div>

                    <br/>
                    <div class="kt-portlet__foot">
                        <div class="kt-form__actions">

                            <button type="button"
                                    class="btn btn-primary btn-xs extraOptionOfAddAttendance saveAttendanceOptions ">{{ 'Save'|trans }}</button>
                        </div>
                    </div>

                </div>
            </form>

        </div>

    {% endfor %}


{% else %}

    <div class="col-lg-12 col-md-12 col-sm-12"s>
        <div class="alert alert-warning" role="alert">
            <div class="alert-icon"><i class="flaticon-questions-circular-button"></i></div>
            <div class="alert-text">
                <div><b> {{ 'Warning'  | trans }}</b></div>
                <span>{{ 'Attendance Status are not selected from the Settings' | trans }}</span>
            </div>
        </div>
    </div>
{% endif %}