<html>
  <head>
    <title>{{ basename }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<style>
{{ highlight_css }}

div#nav-col ul {
  list-style: none;
}
data {
  display: none;
}
#nav-col {
  max-width: 200px;
}
table {
  font-size: 8pt;
}
</style>
  </head>
  <body>
    <div class="container-fluid">
      <!--
      <div class="row-fluid border-bottom">
        <div class="col">
          <div id="top-tray" class="mb-1">
            <span class="fw-bold">{{ '{{ message }}' }}</span>
          </div>
        </div>
      </div>
      -->
      <div class="row mt-2">
        <div class="col-2" id="nav-col">
          <div class="list-group">
            <a href="#" id="summary" class="list-group-item list-group-item-action">Summary</a>
            <a href="#" id="mapipods" class="list-group-item list-group-item-action">Machine API Pods</a>
            <a href="#" id="clusterautoscalers" class="list-group-item list-group-item-action">ClusterAutoscalers</a>
            <a href="#" id="machineautoscalers" class="list-group-item list-group-item-action">MachineAutoscalers</a>
            <a href="#" id="machines" class="list-group-item list-group-item-action">Machines</a>
            <a href="#" id="nodes" class="list-group-item list-group-item-action">Nodes</a>
          </div>
        </div>
        <div class="col-10">
          <div id="main-content" class="overflow-auto"></div>
        </div>
      </div>
    </div>

<!-- data -->

<data id="summary-data">
  <h1>Summary</h1>
  <hr/>
  <dl>
    <dt class="text-light bg-secondary ps-1 mb-1">{{ clusterautoscalers|length }} x ClusterAutoscalers</dt>
    <dd>
      {% for clusterautoscaler in clusterautoscalers %}
      <span class="font-monospace">{{ clusterautoscaler.metadata.name }}</span>
      <table class="table table-sm table-striped font-monospace">
        <thead>
          <tr>
            <th scope="col">Resource</th>
            <th scope="col">Min</th>
            <th scope="col">Max</th>
        </tr>
        </thead>
        <tbody>
          {% if clusterautoscaler.spec.resourceLimits.cores %}
          <tr>
            <th scope="col">Cores</th>
            <td>{{ clusterautoscaler.spec.resourceLimits.cores.min }}</td>
            <td>{{ clusterautoscaler.spec.resourceLimits.cores.max }}</td>
          </tr>
          {% endif %}
          {% if clusterautoscaler.spec.resourceLimits.memory %}
          <tr>
            <th scope="col">Memory</th>
            <td>{{ clusterautoscaler.spec.resourceLimits.memory.min }}</td>
            <td>{{ clusterautoscaler.spec.resourceLimits.memory.max }}</td>
          </tr>
          {% endif %}
          {% for gpu in clusterautoscaler.spec.resourceLimits.gpus %}
          <tr>
            <th scope="col">{{ gpu.type }}</td>
            <td>{{ gpu.min }}</td>
            <td>{{ gpu.max }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% endfor %}
    </dd>

    <dt class="text-light bg-secondary ps-1 mb-1">{{ machineautoscalers|length }} x MachineAutoscalers</dt>
    <dd>
      <table class="table table-sm table-striped font-monospace">
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">MachineSet</th>
            <th scope="col">Min</th>
            <th scope="col">Max</th>
        </tr>
        </thead>
        <tbody>
          {% for machineautoscaler in machineautoscalers %}
          <tr>
            <th scope="col">{{ machineautoscaler.metadata.name }}</th>
            <td>{{ machineautoscaler.spec.scaleTargetRef.name }}</td>
            <td>{{ machineautoscaler.spec.minReplicas }}</td>
            <td>{{ machineautoscaler.spec.maxReplicas }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </dd>

    <dt class="text-light bg-secondary ps-1 mb-1">{{ machinesets|length }} x MachineSets</dt>
    <dd>
      {% if machinesets_participating|length == 0 %}
      No MachineSets participating in Autoscaling
      {% else %}
      The following {{ machinesets_participating|length }} are participating in Autoscaling
      <table class="table table-sm table-striped font-monospace">
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Min Replicas</th>
            <th scope="col">Max Replicas</th>
          </tr>
        </thead>
        <tbody>
          {% for machineset in machinesets_participating %}
          <tr>
            <th scope="col">{{ machineset.metadata.name }}</th>
            <td>{{ machineset.autoscaler_min }}</td>
            <td>{{ machineset.autoscaler_max }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% endif %}
    </dd>

    <dt class="text-light bg-secondary ps-1 mb-1">{{ machines|length }} x Machines</dt>
    <dd>
    {% if machines.notrunning|length == 0 %}
    All machines in Running phase
    {% else %}
    The following {{ machines.notrunning|length }} are not in Running phase
    <table class="table table-sm table-striped font-monospace">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Phase</th>
          <th scope="col">Node</th>
        </tr>
      </thead>
      <tbody>
        {% for machine in machines.notrunning %}
        <tr>
          <th scope="col">{{ machine.metadata.name }}</th>
          {% if machine.status %}
          <td>{{ machine.status.phase }}</td>
            {% if machine.status.nodeRef %}
            <td>{{ machine.status.nodeRef.name }}</td>
            {% else %}
            <td>No Node found!</td>
            {% endif %}
          {% else %}
          <td>Status not found!</td>
          <td>No Node found!</td>
          {% endif %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}

    <dt class="text-light bg-secondary ps-1 mb-1">{{ nodes.data|length }} x Nodes</dt>
    <dd>
    {% if nodes.notready|length == 0 %}
    All nodes ready
    {% else %}
    The following {{ nodes.notready|length }} are not Ready
    <table class="table table-sm table-striped font-monospace">
      <thead>
        <tr>
          <th scope="col">Name</th>
        </tr>
      </thead>
      <tbody>
        {% for node in nodes.notready %}
        <tr>
          <th scope="col">{{ node.metadata.name }}</th>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}
    </dd>
  </dl>
</data>

<data id="mapipods-data">
  <h1>Machine API Pods</h1>
  {% for pod in mapipods %}
  <div class="accordion" id="{{ pod.metadata.name|replace(".", "-") }}-accordion">
    <div class="accordion-item">
      <h2 class="accordion-header" id="heading-{{ pod.metadata.name|replace(".", "-") }}">
        <button
            class="accordion-button collapsed p-2"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#collapse-{{ pod.metadata.name|replace(".", "-") }}" 
            aria-expanded="false"
            aria-controls="collapse-{{ pod.metadata.name|replace(".", "-") }}">
          {{ pod.metadata.name }}
        </button>
      </h2>
      <div id="collapse-{{ pod.metadata.name|replace(".", "-") }}"
           class="accordion-collapse collapse"
           aria-labelledby="heading-{{ pod.metadata.name|replace(".", "-") }}"
           data-bs-parents="#{{ pod.metadata.name }}-accordion">
        <div class="accordion-body fs-6">
          {{ pod.yaml_highlight_content }}
        </div>
      </div>
    </div>
    {% for containerlog in pod.containerlogs %}
    {% if containerlog.logs %}
    <div class="accordion-item">
      <div class="accordion" id="{{ pod.metadata.name|replace(".", "-") }}-{{ containerlog.name|replace(".", "-") }}-accordion">
        <h2 class="accordion-header" id="heading-{{ pod.metadata.name|replace(".", "-") }}-{{ containerlog.name|replace(".", "-") }}">
          <button
              class="accordion-button collapsed p-2"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#collapse-{{ pod.metadata.name|replace(".", "-") }}-{{ containerlog.name|replace(".", "-") }}"
              aria-controls="collapse-{{ pod.metadata.name|replace(".", "-") }}-{{ containerlog.name|replace(".", "-") }}">
            {{ pod.metadata.name }} {{ containerlog.name }}
          </button>
        </h2>
        <div id="collapse-{{ pod.metadata.name|replace(".", "-") }}-{{ containerlog.name|replace(".", "-") }}"
             class="accordion-collapse collapse"
             aria-labelledby="heading-{{ pod.metadata.name|replace(".", "-") }}-{{ containerlog.name|replace(".", "-") }}"
             data-bs-parents="#{{ pod.metadata.name|replace(".", "-") }}-{{ containerlog.name|replace(".", "-") }}-accordion">
          <div class="accordion-body fs-6">
            <pre>{{ containerlog.logs }}</pre>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    {% endfor %}
  </div>
  {% endfor %}
</data>

{% for data in accordiondata %}
<data id="{{ data.cssid }}-data">
  <h1>{{ data.name }}</h1>
  <div class="accordion" id="{{ data.cssid }}-accordion">
    {% for item in data.iterable %}
    <div class="accordion-item">
      <h2 class="accordion-header" id="heading-{{ item.metadata.name|replace(".", "-") }}">
        <button
            class="accordion-button collapsed p-2"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#collapse-{{ item.metadata.name|replace(".", "-") }}" 
            aria-expanded="false"
            aria-controls="collapse-{{ item.metadata.name|replace(".", "-") }}">
          {{ item.metadata.name }}
        </button>
      </h2>
      <div id="collapse-{{ item.metadata.name|replace(".", "-") }}"
           class="accordion-collapse collapse"
           aria-labelledby="heading-{{ item.metadata.name|replace(".", "-") }}"
           data-bs-parents="#{{ data.cssid }}-accordion">
        <div class="accordion-body fs-6">
          {{ item.yaml_highlight_content }}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</data>
{% endfor %}

  <!-- bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  <!-- vuejs -->
  <!--
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  -->

<script>
  // a vue stub, in case i want to use it later
  /*
var app = new Vue({
  el: '#top-tray',
  data: {
    message: '{{ basename }}'
  }
})
 */

var maincontent = document.getElementById('main-content')
maincontent.style.height = window.innerHeight - 10
var datalist = [
  'mapipods',
  'clusterautoscalers',
  'machineautoscalers',
  'machines',
  'nodes',
  'summary',
]
datalist.forEach(function (element) {
    let anchor = document.getElementById(element)
    if (anchor != undefined) {
        anchor.onclick = function () {
            let data = document.getElementById(element + '-data')
            maincontent.innerHTML = data.innerHTML
        }
    }
})
var summary = document.getElementById('summary')
summary.click()
</script>
  </body>
</html>
