{% extends "admin/layout.html" %}

{% block content %}
<div class="container">

<div class="w-100 text-center" style="min-width: 640px;">
  {% for stat in stats %}
    {% if stat.text == 'Events' %}
      <a href="{{ url_for('admin.events') }}"
    {% elif stat.text == 'Users' %}
      <a href="{{ url_for('admin.users') }}"
    {% elif stat.text == 'Dribs' %}
      <a href="{{ url_for('public.dribs') }}"
    {% else %}
      <a href="{{ url_for('admin.projects') }}"
    {% endif %}
       class="card stat" style="width: {{ 90/stats|length }}%; height: {{ stat.height }}em">
      {% if stat.img %}
        <img src="{{ stat.img }}" class="card-img-top">
      {% endif %}
        <div class="card-body" title="{{ stat.text }}">
            <h5 class="card-title">{{ stat.value }}</h5>
            <i class="fa fa-{{ stat.icon }}" aria-hidden="true"></i> {{ stat.text }}
        </div>
    </a>
  {% endfor %}
</div>

<div class="jumbotron admin-stats text-center" style="min-width: 640px;">

{% if event %}
  <div class="clearfix text-left m-4">
    {% include "includes/header.html" %}
  </div>

  <div class="mb-2 text-center">
    <a href="{{ url_for('admin.event', event_id=event.id) }}" class="btn btn-lg btn-warning">
      <i class="fa fa-pencil" aria-hidden="true"></i>
      Featured Event</a>
    <a href="{{ url_for('admin.event_projects', event_id=event.id) }}" class="btn btn-lg btn-success">
      <i class="fa fa-star" aria-hidden="true"></i>
      Projects</a>
    {% if config.BACKBOARD_URL %}
    <a href="{{ url_for('public.backboard') }}" class="btn btn-lg btn-outline-dark">
      <i class="fa fa-star" aria-hidden="true"></i>
      Backboard</a>
    {% endif %}
    <a href="{{ url_for('admin.event_resource_area') }}" class="btn btn-lg btn-outline-light">
      <i class="fa fa-life-ring" aria-hidden="true"></i>
      Resources</a>
    <a href="{{ url_for('public.event_start') }}" class="btn btn-lg btn-outline-secondary">
      <i class="fa fa-check" aria-hidden="true"></i>
      Checklist</a>
  </div>
{% else %}
  <div class="mb-2 text-center">
    <a href="{{ url_for('public.event_start') }}" class="btn btn-lg btn-success">
      <i class="fa fa-calendar" aria-hidden="true"></i>
      Plan an event</a>
    <a href="{{ url_for('admin.presets') }}" class="btn btn-lg btn-info">
      <i class="fa fa-pencil" aria-hidden="true"></i>
      Set roles &amp; categories</a>
  </div>
{% endif %}

  <div class="messages ps-5 pe-5 m-3 fs-5">
    <div id="msgs">{{ msgs }}</div>
  </div>

  <div id="announcements" class="mt-4 input-group">
    <textarea class="form-control editable w-100 fs-5 text-dark"
              style="max-width: 740px; background: #ffd73e;">{{ event.status_text }}</textarea>
    <button class="form-control fs-1"
      title="Send a message to logged in users"
      >&nbsp;📣&nbsp;</button>
  </div>

  <div class="container chart-container mt-4">
    <div id="motd" class="fst-italic">«{{ motd }}»</div>
    <div id="activities"></div>
  </div>

  <div class="mt-2 fs-4">
    <p><tt>{{ timeinfo }}</tt></p>
    <a href="{{ url_for('public.clear_cache') }}">Refresh</a> |
    <b><a href="{{ url_for('public.about') }}">Help</a></b> |
    <a href="mailto:dribdat@datalets.ch">Hotline</a>
  </div>

</div><!-- /jumbotron -->

</div>
{% endblock %}

{% block js %}
<!-- TODO: move to general loader -->
<script src="https://cdn.jsdelivr.net/npm/vega@5/build/vega.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5/build/vega-lite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6/build/vega-embed.min.js"></script>
<style>
  #activities {
    margin: 2em;
    padding: 1em;
    background: #fff;
    max-width:100%;
    overflow-x: auto;
    clear: both;
    display: inline-block;
  }
</style>
<script src="{{ url_for('static', filename='js/admin.js')}}"></script>
{% endblock %}