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

{% load i18n static dashboard_tags %}

{% block title %}{% trans 'Dashboard' %}{% endblock %}

{% block css %}
  <link rel="stylesheet" type="text/css" href="{% static 'vault/css/dashboard.css' %}" />
{% endblock %}

{% block some_top_info %}{% trans 'Dashboard' %}{% endblock %}
{% block content_title %}{{ project_name }}{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block content_top %}
  {{ block.super }}
{% endblock %}

{% block content %}
  <div class="row">
    <div class="col-md-8">

      <ul class="row dashboard-widgets" id="dashboard-widgets">
        <li class="col-md-6">
          <div class="widget-dummy"></div>
        </li>
        <li class="col-md-6">
          <div class="widget-dummy two"></div>
        </li>
      </ul>

    </div>
    <div class="col-md-4">

      <div class="dashboard-info">
        <div class="last-login">
          <h4>{% trans 'Last Login' %}</h4>
          <span>{{ last_login }}</span>
        </div>

        <div class="useful-links">
          <a href="{% url 'update_teams_users' project_name %}" class="item">
            <i class="icon fas fa-users-cog"></i>
            <span class="text">
              <strong class="item-title">{% trans 'Manage my Team' %}</strong>
              <span class="item-text">{% trans 'Add or remove someone in your team' %}</span>
            </span>
          </a>
        </div>
      </div>

    </div>
  </div>
{% endblock %}

{% block js_bottom %}
{{ block.super }}
<script type="text/html" id="widget_default">
  <style>
  .<%=name%> .head { background-color: <%=color%>; }
  </style>

  <div class="box widget <%=name%>">
    <div class="head">
      <span class="name">
        <%=title%>
        <span class="info"><%=subtitle%></span>
      </span>
    </div>

    <div class="content">
      <% for (var i = 0; i < properties.length; i++) { %>
        <div class="item-box">
          <%=properties[i].description%>
          <span class="big-number"><%=properties[i].value%></span>
          <%=properties[i].name%>
        </div>
        <% if ((i+1) % 2 == 0) { %>
          <div class="item-box-break"></div>
        <% } %>
      <% } %>
    </div>

    <div class="base">
      <% for ( var i = 0; i < buttons.length; i++ ) { %>
      <a class="btn btn-sm btn-light" href="<%=buttons[i].url%>"><%=buttons[i].name%></a>
      <% } %>
    </div>
  </div>
</script>

{% if has_team %}
<script type="text/javascript">
  {% autoescape off %}
  let endpoints = [{% info_endpoints %}];
  {% endautoescape %}

  let widget_list = document.getElementById("dashboard-widgets");

  let widgets = []

  endpoints.forEach(async (endpoint) => {
    let response = await fetch(endpoint + "?opt=widgets");
    try {
      let data = await response.json();
      data.forEach(d => {
        var wid = document.createElement("li");
        if (d.type == "default") {
          wid.className = "col-md-6";
          wid.innerHTML = tmpl("widget_default", Object.assign({
            "name": "default",
            "color": "#aaaaaa",
            "icon": "fas fa-question-circle",
            "title": "",
            "url": "#",
            "subtitle": "",
            "properties": [],
            "buttons": []
          }, d));
        }

        wid.json_endpoint = endpoint;

        widgets.push(wid);
        widgets.sort((a,b) => {
          return endpoints.indexOf(a.json_endpoint) - endpoints.indexOf(b.json_endpoint);
        });

        widget_list.innerHTML = '';
        widgets.forEach(w => {
          widget_list.appendChild(w);
        });

      });
    } catch (err) {
      return;
    }
  });
</script>
{% endif %}
<script>
  let $last_login = $('.last-login > span');
  let last_login_date = new Date('{{ last_login }}');
  $('.last-login > span').text(last_login_date.toISOString().split('T')[0] + ' ' +
                               last_login_date.toTimeString().split(' ')[0]);
</script>

{% endblock %}
