{% extends '_base.html' %} {% block styles %}
<style>
  #services {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .service {
    font-size: 1.2em;
    display: flex;
    flex-direction: column;
  }
  .service-link {
    display: flex;
    width: var(--lfw);
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    vertical-align: bottom;
    background-color: var(--panel-1-color);
    min-height: clamp(60px, 10vw, 120px);
    overflow: hidden;
    padding: var(--left-frame-padding);
    border-radius: 0;
    border-bottom: var(--panel-border);
    text-decoration: none;
    color: black;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .if {
    background-color: var(--orange);
  }
  .fs {
    background-color: var(--blue);
  }
  .cmk {
    background-color: var(--green);
  }
  .pve {
    background-color: var(--lilac);
  }
</style>
{% endblock %} {% block content %}
<h2>Services for {{ hostname }}</h2>
<div id="services">
  {% for svc in services %}
  <div class="service">
    {% if svc.links %} {% for l in svc.links %} {% set classString =
    'service-link' %} {% if 'Interface' in svc.extensions.description %} {% set
    classString = classString + ' if' %} {% elif 'Filesystem' in
    svc.extensions.description %} {% set classString = classString + ' fs' %} {%
    elif 'Check_MK' in svc.extensions.description %} {% set classString =
    classString + ' cmk' %} {% elif 'PVE' in svc.extensions.description %} {%
    set classString = classString + ' pve' %} {% endif %}
    <button class="{{ classString }}" data-link="{{ l.href }}">
      {{ svc.extensions.description }}
    </button>
    {% endfor %} {% else %}
    <span class="service-label"
      >{{ svc.service_description or svc.title or svc.description or svc.name
      }}</span
    >
    {% endif %}
  </div>
  {% endfor %}
</div>
<script>
  function playSound(audioId) {
    var audio = document.getElementById(audioId);
    audio.play();
  }

  function serviceClick(event) {
    event.preventDefault();
    playSound("audio1");
    let url = event.currentTarget.getAttribute("data-link");
    let target = "/service/" + encodeURIComponent(url);
    window.location.href = target;
  }

  document.querySelectorAll(".service-link").forEach(function (el) {
    el.addEventListener("click", serviceClick);
  });
</script>
{% endblock %}