{% if component.has_item or component.form_prefix %}
<div class="panel panel-default">
    {% if component.title %}
        <div class="panel-heading clearfix">
            <span class="pull-left">
                {% if component.icon %}<i class="fa {{ component.icon }}"></i>{% endif %} {{ component.title }}
            </span>
        </div>
    {% endif %}
    <div class="panel-body no-padding">
        {% if component.mobile %}
            <div class="alert alert-info">
                Clique no ícone <i class="fa fa-check"></i> para detalhar a informação.
            </div>
        {% endif %}
        <table width="100%">
            <thead>
                <tr>
                    <th style="height: 40px; border: solid 1px #CCC; background-color: #DDD"></th>
                    {% for week_day in component.WEEK_DAYS %}
                        <th style="height: 40px; border: solid 1px #CCC; background-color: #DDD;text-align: center" valign="center">{% if component.mobile %}{{ week_day.0 }}{% else %}{{ week_day }}{% endif %}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in component.rows %}
                    <tr>
                        {% for value in row %}
                            {% if loop.first %}
                                <th style="height: 40px; border: solid 1px #CCC; background-color:#EEE;text-align: center" valign="center">{{ value }}</th>
                            {% else %}
                                <td style="height: 40px; width: 11%; border: solid 1px #DDD;text-align: center" valign="center">
                                    {% if component.form_prefix %}
                                        <input class="schedule-time" type="checkbox" value="{{ loop.index0 }}::{{ row.0 }}" {% if value %}checked{% endif %} onclick="checkTimes('{{ component.form_prefix }}')">
                                        <span class="custom-checkbox"></span>
                                    {% else %}
                                        {% for item in value %}
                                            {% if component.mobile %}<div data-toggle="tooltip" title="{{ item }}"><i class="fa fa-check"></i> </div>{% else %}{{ item|format }}{% endif %}
                                        {% endfor %}
                                    {% endif %}
                                </td>
                            {% endif %}
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% if component.form_prefix %}
<script>
    function checkTimes(prefix){
        var widget = $('#id_'+prefix+'values');
        widget.val($('.schedule-time:checked').map(function () { return $(this).val(); }).get().join('|'));
    }
    checkTimes('{{ component.form_prefix }}');
</script>
{% endif %}
{% endif %}