{% extends 'frontend/base.html' %}
{% load static %}

{% block navbar %}
{% include 'frontend/snippet.navlinks.html' %}
{% endblock %}

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

    <div class="col-8">

      <div>
        <div class="title">
          <h5>Numbers</h5>
        </div>

        <table class="table table-striped table-bordered small">
          <thead class="thead-default">
            <th/>
            {% for architecture in architectures %}
            <th>{{ architecture.name }}</th>
            {% endfor %}
            <th>Total</th>
          </thead>
          <tbody class="thead-default">
            <tr>
              <td class="th">Number of all machines</td>
              {% for number in data.matrix.0 %}
              <td>{{ number }}</td>
              {% endfor %}
            </tr>
            <tr>
              <td class="th">Number of free machines</td>
              {% for number in data.matrix.1 %}
              <td>{{ number }}</td>
              {% endfor %}
            </tr>
            <tr>
              <td class="th">Number of machines where Login works</td>
              {% for number in data.matrix.2 %}
              <td>{{ number }}</td>
              {% endfor %}
            </tr>
            <tr>
              <td class="th">Number of infinite reservations</td>
              {% for number in data.matrix.3 %}
              <td>{{ number }}</td>
              {% endfor %}
            </tr>
          </tbody>
        </table>
      </div>

      <div>
        <div class="title">
          <h5>Released Machines</h5>within in the last 48 hours
        </div>

        <table class="table table-striped table-bordered small">
          <thead class="thead-default">
            <th>FQDN</th>
            <th>Owner</th>
            <th>At</th>
            <th>Until</th>
            <th>Reason</th>
          </thead>
          <tbody>
          {% for reservation in data.released_reservations %}
            <tr>
              <td><a href="{% url 'frontend:detail' reservation.machine.id %}">{{ reservation.machine.fqdn }}</a></td>
              <td>{{ reservation.reserved_by }}</td>
              <td>{{ reservation.reserved_at }}</td>
              <td>{{ reservation.reserved_until }}</td>
              <td>{{ reservation.reserved_reason }}</td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>

      <div>
        <div class="title">
          <h5>Reserved Machines</h5>within in the last 48 hours
        </div>

        <table class="table table-striped table-bordered small">
          <thead class="thead-default">
            <th>FQDN</th>
            <th>Owner</th>
            <th>At</th>
            <th>Until</th>
            <th>Reason</th>
          </thead>
          <tbody>
          {% for machine in data.reserved_machines %}
            <tr>
              <td><a href="{% url 'frontend:detail' machine.id %}">{{ machine.fqdn }}</a></td>
              <td>{{ machine.reserved_by }}</td>
              <td>{{ machine.reserved_at }}</td>
              <td>
              {% if machine.is_reserved_infinite %}
                infinite
              {% else %}
                {{ machine.reserved_until }}
              {% endif %}
              </td>
              <td>{{ machine.reserved_reason }}</td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>

    </div>

    <div class="col-4">

      <div>
        <div class="title">
          <h5>Network Domains</h5>
        </div>
        <div>
          <canvas id="domainChart"></canvas>
        </div>
      </div>

      <div>
        <div class="title">
          <h5>Machine Status</h5>{{ data.total }} Machines
        </div>
        <div>
          <canvas id="statusChart"></canvas>
        </div>
      </div>

    </div>

  </div>
</div>

{% endblock %}

{% block javascript_imports %}
<script src="{% static 'frontend/js/chart.js' %}"></script>
{% endblock %}

{% block javascript %}
<script>
function getRandomColor() {
  var letters = '789ABCD'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++ ) {
    color += letters[Math.round(Math.random() * 6)];
  }
  return color;
}

new Chart(document.getElementById("statusChart"),{
  type:"bar",
  data: {
    labels: [{% for label in data.status.labels %}"{{ label }}",{% endfor %}],
    datasets: [
      {
        label: 'Check',
        data: [{{ data.status.values1|join:", " }}],
        fill: false,
        backgroundColor: [
        {% for label in data.status.labels %}
          "rgb(201, 203, 207)",
        {% endfor %}
        ],
        borderWidth: 1
      },
      {
        label: 'Successful',
        data: [{{ data.status.values2|join:", " }}],
        fill: false,
        backgroundColor: [
        {% for label in data.status.labels %}
          "rgb(102, 255, 153)",
        {% endfor %}
        ],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [
        {
          display: true,
          ticks: {
            beginAtZero: true,
            max: {{ data.status.max }}
          }
        }
      ],
    },
    legend: {
      display: false
    }
  }
});

new Chart(document.getElementById("domainChart"),{
  type:"doughnut",
  data: {
    labels: [{% for label in data.domains.labels %}"{{ label }}",{% endfor %}],
    datasets: [
      {
        data: [{{ data.domains.values|join:", " }}],
        backgroundColor: [
        {% for label in data.domains.labels %}
          getRandomColor(),
        {% endfor %}
        ]
      }
    ]
  },
  options: []
});
</script>
{% endblock %}