{% extends "base.html" %}
{% import "/visit_forms.html" as form %}

{% block title %}접속기기별 접속자집계{% endblock title %}
{% block subtitle %}접속기기별 접속자집계{% endblock subtitle %}

{% block content %}
    {{ form.search(request, fr_date, to_date) }}
    {{ form.anchor('device', fr_date, to_date) }}

    <div class="tbl_head01 tbl_wrap">
        <table>
            <caption>접속기기별 접속자집계 목록</caption>
            <thead>
                <tr>
                    <th scope="col">순위</th>
                    <th scope="col">접속기기</th>
                    <th scope="col">그래프</th>
                    <th scope="col">접속자수</th>
                    <th scope="col">비율(%)</th>
                </tr>
            </thead>
            <tbody>
            {% for visit in visits %}
                <tr class="bg{{ loop.cycle('0', '1') }}">
                    <td class="td_num">{{ loop.index }}</td>
                    <td class="td_category">{{ visit.vi_device }}</td>
                    <td>
                        <div class="visit_bar">
                            <span style="width:{{ visit.percent }}%"></span>
                        </div>
                    </td>
                    <td class="td_num_c3">{{ visit.count|number_format }}</td>
                    <td class="td_num">{{ visit.percent }}</td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="5" class="empty_table">자료가 없습니다.</td>
                </tr>
            {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">합계</td>
                    <td><strong>{{ total_records|number_format }}</strong></td>
                    <td>100%</td>
                </tr>
            </tfoot>
        </table>
    </div>
{% endblock content %}