{% extends 'layouts/base.html' %}

{% block title %} Dashboard {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

<section class="min-vh-100 mb-8">
  {% if BACKEND == "compose" %}
   <div class="page-header align-items-start min-vh-80 pt-5 pb-11 m-3 border-radius-lg" style="background-image: url('{{ ASSETS_ROOT }}/img/miniMAIA.png');">
  {% else %}
    <div class="page-header align-items-start min-vh-50 pt-5 pb-11 m-3 border-radius-lg" style="background-image: url('{{ ASSETS_ROOT }}/img/maia_background.jpg');">
  {% endif %}
    <span class="mask bg-gradient-dark opacity-6"></span>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-5 text-center mx-auto">
          <h1 class="text-white mb-2 mt-5">MAIA Clusters</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="row my-n10">
    {% for k in clusters.items %}
    <div class="col-lg-6 col-md-6 mb-md-0 mb-4">
      <div class="card">
        <div class="card-header pb-0">
          <div class="row">
            <div class="col-lg-6 col-15">
              <h3>{{k|dict_key|to_space|lower|title|maia}}</h3>
            </div>
            <div class="col-lg-6 col-5 my-auto text-end">
              <div class="dropdown float-lg-end pe-4">
                <a class="cursor-pointer" id="dropdownTable" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="fa fa-ellipsis-v text-secondary"></i>
                </a>
                {% with val=k|dict_key %}
                <ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable">
                  <li><a class="dropdown-item border-radius-md" href={{external_links|get_item:val|get_item:"dashboard"}}>{{k|dict_key|to_space|lower|title|maia}} Dashboard</a></li>
                  <li><a class="dropdown-item border-radius-md" href={{external_links|get_item:val|get_item:"login"}}>{{k|dict_key|to_space|lower|title|maia}} Login</a></li>
                  <li><a class="dropdown-item border-radius-md" href={{external_links|get_item:val|get_item:"grafana"}}>{{k|dict_key|to_space|lower|title|maia}} Grafana</a></li>
                  <li><a class="dropdown-item border-radius-md" href={{external_links|get_item:val|get_item:"rancher"}}>{{k|dict_key|to_space|lower|title|maia}} Rancher</a></li>
                  <li><a class="dropdown-item border-radius-md" href={{external_links|get_item:val|get_item:"argocd"}}>{{k|dict_key|to_space|lower|title|maia}} ArgoCD</a></li>
                  <li><a class="dropdown-item border-radius-md" href={{external_links|get_item:val|get_item:"registry"}}>{{k|dict_key|to_space|lower|title|maia}} Registry</a></li>
                  <li><a class="dropdown-item border-radius-md" href={{external_links|get_item:val|get_item:"keycloak"}}>{{k|dict_key|to_space|lower|title|maia}} Keycloak</a></li>
                  <li><a class="dropdown-item border-radius-md" href={{external_links|get_item:val|get_item:"traefik"}}>{{k|dict_key|to_space|lower|title|maia}} Traefik</a></li>
                  <li><a class="dropdown-item border-radius-md" href={{external_links|get_item:val|get_item:"minio"}}>{{k|dict_key|to_space|lower|title|maia}} MinIO</a></li>
                </ul>
                {% endwith %}
              </div>
            </div>
          </div>
        </div>
        <div class="card-body px-0 pb-2">
          <div class="table-responsive">
            <table class="table align-items-center mb-0">
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center opacity-7"></th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Node</th>
              <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
              <tbody>
                {% for node in k|dict_val %}
                <tr>
                  <td class="align-right text-center text-sm">
                    {% if status|get_item:node|index:0 != "True" %}
                    <p class="text-sm mb-0">
                      <i class="fa fa-times text-danger" aria-hidden="true"></i>
                    </p>
                    {% elif status|get_item:node|index:1 == True %}
                    <p class="text-sm mb-0">
                      <i class="fa fa-check text-warning" aria-hidden="true"></i>
                    </p>
                    {% else %}
                    <p class="text-sm mb-0">
                      <i class="fa fa-check text-success" aria-hidden="true"></i>
                    </p>
                    {% endif %}
                  </td>
                  <td>
                    <div class="d-flex px-2 py-1">
                      <div class="d-flex flex-column justify-content-center">
                        <h6 class="mb-0 text-sm">{{node}}</h6>
                      </div>
                    </div>
                  </td>
                  <td class="align-middle text-center text-sm">
                    {% if status|get_item:node|index:0 != "True" %}
                    <span class="text-xs font-weight-bold">Not Ready</span>
                    {% elif status|get_item:node|index:1 == True %}
                    <span class="text-m font-weight-bold">Under Maintenance</span>
                    {% else %}
                    <span class="text-m font-weight-bold">Ready</span>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</section>

{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}

<script src="{{ ASSETS_ROOT }}/js/plugins/chartjs.min.js"></script>
<script>
  var ctx = document.getElementById("chart-bars").getContext("2d");

  new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      datasets: [{
        label: "Sales",
        tension: 0.4,
        borderWidth: 0,
        borderRadius: 4,
        borderSkipped: false,
        backgroundColor: "#fff",
        data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
        maxBarThickness: 6
      }, ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false,
        }
      },
      interaction: {
        intersect: false,
        mode: 'index',
      },
      scales: {
        y: {
          grid: {
            drawBorder: false,
            display: false,
            drawOnChartArea: false,
            drawTicks: false,
          },
          ticks: {
            suggestedMin: 0,
            suggestedMax: 500,
            beginAtZero: true,
            padding: 15,
            font: {
              size: 14,
              family: "Open Sans",
              style: 'normal',
              lineHeight: 2
            },
            color: "#fff"
          },
        },
        x: {
          grid: {
            drawBorder: false,
            display: false,
            drawOnChartArea: false,
            drawTicks: false
          },
          ticks: {
            display: false
          },
        },
      },
    },
  });

  var ctx2 = document.getElementById("chart-line").getContext("2d");

  var gradientStroke1 = ctx2.createLinearGradient(0, 230, 0, 50);

  gradientStroke1.addColorStop(1, 'rgba(203,12,159,0.2)');
  gradientStroke1.addColorStop(0.2, 'rgba(72,72,176,0.0)');
  gradientStroke1.addColorStop(0, 'rgba(203,12,159,0)'); //purple colors

  var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50);

  gradientStroke2.addColorStop(1, 'rgba(20,23,39,0.2)');
  gradientStroke2.addColorStop(0.2, 'rgba(72,72,176,0.0)');
  gradientStroke2.addColorStop(0, 'rgba(20,23,39,0)'); //purple colors

  new Chart(ctx2, {
    type: "line",
    data: {
      labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      datasets: [{
          label: "Mobile apps",
          tension: 0.4,
          borderWidth: 0,
          pointRadius: 0,
          borderColor: "#cb0c9f",
          borderWidth: 3,
          backgroundColor: gradientStroke1,
          fill: true,
          data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
          maxBarThickness: 6

        },
        {
          label: "Websites",
          tension: 0.4,
          borderWidth: 0,
          pointRadius: 0,
          borderColor: "#575f9a",
          borderWidth: 3,
          backgroundColor: gradientStroke2,
          fill: true,
          data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
          maxBarThickness: 6
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false,
        }
      },
      interaction: {
        intersect: false,
        mode: 'index',
      },
      scales: {
        y: {
          grid: {
            drawBorder: false,
            display: true,
            drawOnChartArea: true,
            drawTicks: false,
            borderDash: [5, 5]
          },
          ticks: {
            display: true,
            padding: 10,
            color: '#b2b9bf',
            font: {
              size: 11,
              family: "Open Sans",
              style: 'normal',
              lineHeight: 2
            },
          }
        },
        x: {
          grid: {
            drawBorder: false,
            display: false,
            drawOnChartArea: false,
            drawTicks: false,
            borderDash: [5, 5]
          },
          ticks: {
            display: true,
            color: '#b2b9bf',
            padding: 20,
            font: {
              size: 11,
              family: "Open Sans",
              style: 'normal',
              lineHeight: 2
            },
          }
        },
      },
    },
  });
</script>

{% endblock javascripts %}