{% extends "zerver/base.html" %}

{% block customhead %}
{% stylesheet 'portico' %}
{% endblock %}

{% block content %}
<div class="app portico-page">

{{ render_bundle('stats') }}
{% stylesheet 'stats' %}

<div class="page-content">
  <div id="id_stats_errors" class="alert alert-error"></div>
  <div class="center-charts">
    <h1 class="analytics-page-header">Zulip Analytics for {{ realm_name }}</h1>

    <div class="left">
      <div class="chart-container">
        <h1>Messages Sent Over Time</h1>
        <div class="button-container">
          <label>Aggregation</label>
          <div class="buttons">
            <button class="button" type="button" id='hourly_button'>Hourly </button>
            <button class="button" type="button" id='daily_button'>Daily </button>
            <button class="button" type="button" id='weekly_button'>Weekly </button>
            <button class="button" type="button" id='cumulative_button'>Cumulative </button>
          </div>
        </div>
        <div id="id_messages_sent_over_time"></div>
        <div id="hoverinfo">
            <span id="hover_date"></span>
            <span id="hover_me">Me:</span>
            <span id="hover_me_value"></span>
            <b id="hover_human">Humans:</b>
            <span id="hover_human_value"></span>
            <b id="hover_bot">Bots:</b>
            <span id="hover_bot_value"></span>
        </div>
      </div>

      <div class="chart-container pie-chart">
        <div id="pie_messages_sent_by_client">
          <h1>Messages Sent by Client</h1>
          <div id="id_messages_sent_by_client" class="number-stat"></div>
          <div class="buttons">
            <button class="button" type="button" data-user="user">Me</button>
            <button class="button selected" type="button" data-user="realm">Everyone</button>
            <button class="button" type="button" data-time="week">Last Week</button>
            <button class="button selected" type="button" data-time="month">Last Month</button>
            <button class="button" type="button" data-time="year">Last Year</button>
            <button class="button" type="button" data-time="cumulative">All Time</button>
          </div>
        </div>
      </div>
    </div>

    <div class="right">
      <div class="chart-container pie-chart">
        <div id="pie_messages_sent_by_type">
          <h1>Messages Sent by Recipient Type</h1>
          <div id="id_messages_sent_by_message_type"></div>
          <div id="pie_messages_sent_by_type_total" class="number-stat"></div>
          <div class="buttons">
            <button class="button" type="button" data-user="user">Me</button>
            <button class="button selected" type="button" data-user="realm">Everyone</button>
            <button class="button" type="button" data-time="week">Last Week</button>
            <button class="button selected" type="button" data-time="month">Last Month</button>
            <button class="button" type="button" data-time="year">Last Year</button>
            <button class="button" type="button" data-time="cumulative">All Time</button>
          </div>
        </div>
      </div>

      <div class="chart-container">
        <h1>Active Users</h1>
        <div id="id_number_of_users"></div>
        <div id="users_hover_info" class="number-stat">
          <span id="users_hover_date"></span>
          <b id="users_hover_humans">Users: </b>
          <span id="users_hover_humans_value"></span>
        </div>
      </div>
    </div>
  </div>

  <div class="last-update">
    Last Update: <span id="id_last_full_update"></span>
    <span data-toggle="tooltip" title="{{ _('A full update of all the graphs happens once a day.<br/>The “Messages Sent Over Time” graph is updated once an hour.') }}">
      <span class="icon-vector-question-sign" id="id_last_update_question_sign"></span>
    </span>
  </div>
</div>

</div>
{% endblock %}