{% extends "layout.html" %}
{% set active_page = "community" %}
{% import 'macros/tables.html' as m_tables %}

{% macro top_table_card(items, item_name, table_name) -%}
    <div class="card table-card mb-4">
        <div class="card-header"><h3>{{ table_name }}</h3></div>
        <div class="card-body">
          <table class="table table-striped table-bordered table-hover">
              <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">{{ item_name }}</th>
                    <th scope="col">OctoBots</th>
                </tr>
              </thead>
              <tbody>
                {% for item in items %}
                    {{ m_tables.top_tr(item) }}
                {% endfor %}
              </tbody>
          </table>
        </div>
    </div>
{%- endmacro %}

{% macro col_elem_with_badge(title, badge, badge_color="unique-color-dark") -%}
    <div class="col-2">
        {{ title }}
    </div>
    <div class="col-2">
        <span class="badge {{ badge_color }} font-weight-bold">{{ badge }}</span>
    </div>
{%- endmacro %}

{% block body %}
<br>
{% if can_get_metrics %}
    <div class="card">
        <div class="card-header">
            <h1>
                OctoBot Community
                <a class="badge unique-color-dark float-right" href="https://t.me/joinchat/F9cyfxV97ZOaXQ47H5dRWw" target="_blank"><i class="fab fa-telegram"></i> Community chat</a>
            </h1>
        </div>
    </div>
    <br>
    <div class="col card text-center align-self-start">
        <div class="card-header"><h3>Active OctoBots</h3></div>
        <h4>
            <div class="card-body row">
                {{ col_elem_with_badge("Total:", community_metrics['total_count']) }}
                {{ col_elem_with_badge("This month:", community_metrics['this_month'], badge_color="unique-color") }}
                {{ col_elem_with_badge("Last 6 months:", community_metrics['last_six_month']) }}
            </div>
        </h4>
    </div>
    <br>
    <div class="card-deck">
        {{ top_table_card(community_metrics['top_pairs'], "Pair", "Top community traded pairs") }}
        {{ top_table_card(community_metrics['top_strategies'], "Tentacle", "Top community tentacles") }}
        {{ top_table_card(community_metrics['top_exchanges'], "Exchange", "Top community exchanges") }}
    </div>
{% else %}
    <div class="card">
        <div class="card-header"><h1>To be part of the OctoBot community, please enable <a href="{{ url_for('commands') }}"> OctoBot community data</a>.</h1></div>
    </div>
{% endif %}
<br>
{% endblock %}

{% block additional_scripts %}
<script src="{{ url_for('static', filename='js/components/community.js') }}"></script>
{% endblock additional_scripts %}