{% extends "base.html" %}
{% load static %}

{% block title %}User: {{ object.username }}{% endblock %}

{% block content %}

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="application/javascript">
    $(document).ready(function () {
      $('#datatable').DataTable({
        ordering: true,
        searching: true,
        buttons: true,
        dom: 'B<"clear">lfrtip',
        paging: false,
      });
    });
  </script>

  <div class="container">

    <div class="row">
      <div class="col-sm-12">

        {% if object.name %}
          <h1 class="display-4">{{ object.name }}</h1>
        {% else %}
          <h1 class="display-4">{{ object.username }}</h1>
        {% endif %}
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <p class="h3">Lead inspector</p>
        <ul class="list-group">
          {% for oes in lead_oes %}
            <li class="list-group-item list-group-item-light">
              <a href="{% url "organisations:detail" oes.slug %}">{{ oes.name }}</a><br>
              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-fill" fill="currentColor"
                   xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                      d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
              </svg>

              {% if oes.get_people|length > 1 %}
                <a href="{% url "organisations:person-detail" oes.get_people.0.pk %}">{{ oes.get_people.0 }}</a>
                {{ oes.get_people.0.mobile }} <a href="{% url "organisations:detail" oes.slug %}"> [...]</a>
              {% else %}
                {% for person in oes.get_people %}
                  <a href="{% url "organisations:person-detail" person.pk %}">{{ person }}</a> ({{ person.mobile }})
                {% endfor %}
              {% endif %}
              <span class="float-right">{{ oes.submode }}</span>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>

    {#{% if object == request.user %}#}
    {#<!-- Action buttons -->#}
    {#<div class="row">#}
    {##}
    {#  <div class="col-sm-12 mb-3">#}
    {#    <a class="btn btn-primary" href="{% url 'users:update' %}" role="button">My Info</a>#}
    {#    <a class="btn btn-primary" href="{% url 'account_email' %}" role="button">E-Mail</a>#}
    {#    <!-- Your Stuff: Custom user template urls -->#}
    {#  </div>#}
    {#</div>#}
    {#<!-- End Action buttons -->#}
    {#{% endif %}#}
  </div>
  <hr>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-12 m-2">
        <h3 class="h3">Recent Events</h3>
        <table id="datatable" class="table table-bordered table-striped">
          <thead>
          <tr>
            <th class="col-2">Type</th>
            <th class="col-2">Date</th>
            <th class="col-2">Event</th>
            <th class="col-2">Organisation</th>
            <th class="col-3">Comments</th>
            <th class="col-1">Actions</th>
          </tr>
          </thead>
          <tbody>
          {% for event in all_events %}
            <tr>
              <td class="col-2">
                {{ event.type_descriptor }}
                {% if event.private %}
                  <span class="badge badge-warning float-right">PRIVATE</span>
                {% endif %}
              </td>
              <td class="col-2">{{ event.date|date:"d M Y" }}</td>
              <td class="col-2">{{ event.short_description }}</td>
              <td class="col-2">
                {% if event.organisation %}
                  <a href="{% url "organisations:detail" event.organisation.slug %}">{{ event.organisation }}</a>
                {% else %}
                  NA (DEBUG: THESE EVENTS HAVE TO PARTICIP.)
                {% endif %}
              </td>
              <td class="col-3">{{ event.comments }}</td>
              <td class="col-1"><a class="btn btn-sm btn-secondary" href="#" role="button">Edit</a></td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
{% endblock content %}