{% extends 'core/base.html' %}
{% load i18n static dashboard rules %}

{% block browser_title %}{% blocktrans %}Home{% endblocktrans %}{% endblock %}
{% block no_page_title %}{% endblock %}

{% block extra_head %}
  {{ media }}
{% endblock %}

{% block content %}
  {% has_perm "core.edit_dashboard_rule" user as can_edit_dashboard %}
  {% if can_edit_dashboard %}
    <div class="row no-margin">
      <a class="btn-flat waves-effect waves-light right" href="{% url "edit_dashboard" %}">
        <i class="material-icons left">edit</i>
        {% trans "Edit dashboard" %}
      </a>
    </div>
  {% endif %}

  {% for notification in unread_notifications %}
    <div class="alert primary scale-transition">
      <div>
        <i class="material-icons left">info</i>

        <div class="right">
          <a class="btn-flat waves-effect" href="{% url "notification_mark_read" notification.id %}">
            <i class="material-icons center">close</i>
          </a>
        </div>

        <h1>{{ notification.title }}</h1>
        <p>{{ notification.description|linebreaks }}</p>
      </div>
    </div>
  {% endfor %}

  {% include "core/partials/announcements.html" with announcements=announcements %}

  <div class="row" id="live_load">
    {% for widget in widgets %}
      <div class="col s{{ widget.size_s }} m{{ widget.size_m }} l{{ widget.size_l }} xl{{ widget.size_xl }}">
        {% include_widget widget %}
      </div>
    {% endfor %}
  </div>

  {% if default_dashboard and widgets and can_edit_dashboard %}
    <div class="grey-text right">
      {% blocktrans %}
        You didn't customise your dashboard so that you see the system default. Please click on "Edit dashboard" to
        customise your personal dashboard.
      {% endblocktrans %}
    </div>
  {% endif %}

  {% if activities or notifications %}
    <div class="row">
      <div class="col s12 m6">
        <h5>{% blocktrans %}Last activities{% endblocktrans %}</h5>

        {% if activities %}
          <ul class="collection">
            {% for activity in activities %}
              <li class="collection-item">
                <span class="badge new primary-color">{{ activity.app }}</span>
                <span class="title">{{ activity.title }}</span>
                <p>
                  <i class="material-icons left">access_time</i> {{ activity.created }}
                </p>
                <p>
                  {{ activity.description }}
                </p>
              </li>
            {% endfor %}
          </ul>
        {% else %}
          <p>{% blocktrans %}No activities available yet.{% endblocktrans %}</p>
        {% endif %}
      </div>

      <div class="col s12 m6">
        <h5>{% blocktrans %}Recent notifications{% endblocktrans %}</h5>

        {% if notifications %}
          <ul class="collection">
            {% for notification in notifications %}
              <li class="collection-item">
                <span class="badge new primary-color">{{ notification.app }}</span>
                <span class="title">{{ notification.title }}</span>
                <p>
                  <i class="material-icons left">access_time</i> {{ notification.created }}
                </p>
                <p>
                  {{ notification.description }}
                </p>
                {% if notification.link %}
                  <p>
                    <a href="{{ notification.link }}">{% blocktrans %}More information →{% endblocktrans %}</a>
                  </p>
                {% endif %}
              </li>
            {% endfor %}
          </ul>
        {% else %}
          <p>{% blocktrans %}No notifications available yet.{% endblocktrans %}</p>
        {% endif %}
      </div>
    </div>
  {% endif %}

  <script type="text/javascript" src="{% static "js/include_ajax_live.js" %}"></script>
{% endblock %}
