{% extends 'allianceauth/base-bs5.html' %}
{% load django_bootstrap5 %}
{% load outfit418_versioned_static %}

{% block page_title %}Member Activity{% endblock page_title %}

{% block extra_css %}
    {% include "bundles/jquery-datetimepicker-css.html" %}
{% endblock extra_css %}

{% block content %}
    <div class="col-lg-12" style="padding: 10px">
        <div class="card mb-3">
            <div class="card-body">
                <form id="member-activity-form" method="get">
                    {% bootstrap_form form %}
                    <button type="submit" class="btn btn-primary">Apply</button>
                </form>
            </div>
        </div>
        <div class="card">
            <div class="card-header d-flex gap-2 align-items-center">
                <span class="card-title mb-0">Activity timeline (ET)</span>
                <span class="badge ms-auto" style="background-color: #0ca30c;">Online</span>
                <span class="badge" style="background-color: #5b7ab8;">Offline</span>
                <small class="text-muted">gaps = no data</small>
            </div>
            <div class="card-body">
                <div id="member-activity-chart-container"
                     data-url="{% url 'outfit418backup:member_activity_data' %}"
                     style="position: relative; height: 200px;">
                    <canvas id="member-activity-chart"></canvas>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% block extra_javascript %}
    {% include "bundles/chart-js.html" %}
    {% include "bundles/moment-js.html" %}
    {% include "bundles/jquery-datetimepicker-js.html" %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.1/chartjs-adapter-moment.min.js" integrity="sha512-hVy4KxCKgnXi2ok7rlnlPma4JHXI1VPQeempoaclV1GwRHrDeaiuS1pI6DVldaj5oh6Opy2XJ2CTljQLPkaMrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{% outfit418_static 'outfit418_backup_ratting/js/member_activity.js' %}"></script>
{% endblock extra_javascript %}