{% extends '_base.html' %} {% block styles %}
<style>
  h1 {
    margin-bottom: 20px;
  }
  #details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .service-detail,
  .service-status {
    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;
  }
  .service-status {
    font-size: 1.5em;
    font-weight: bold;
  }
</style>
{% endblock %} {% block content %}
<h1>
  Host {{ service.extensions.host_name }} - {{ service.extensions.description }}
  Details
</h1>
<div id="details">
  <div class="service-status">Status: {{ service.extensions.state }}</div>
  <div class="service-detail">
    Last Check: {{ service.extensions.last_check }}
  </div>
</div>
<script>
  function getServiceStateText(state) {
    switch (state) {
      case 0:
        return "OK";
      case 1:
        return "WARNING";
      case 2:
        return "CRITICAL";
      case 3:
        return "UNKNOWN";
      default:
        return "N/A";
    }
  }

  function getServiceStateClass(state) {
    switch (state) {
      case 0:
        return "service-ok";
      case 1:
        return "service-warning";
      case 2:
        return "service-critical";
      case 3:
        return "service-unknown";
      default:
        return "service-na";
    }
  }

  function getServiceStateColor(state) {
    switch (state) {
      case 0:
        return "var(--green)";
      case 1:
        return "var(--yellow)";
      case 2:
        return "var(--red)";
      case 3:
        return "var(--orange)";
      default:
        return "var(--gray)";
    }
  }

  document.addEventListener("DOMContentLoaded", function () {
    var statusDiv = document.querySelector(".service-status");
    var state = {{ service.extensions.state }};
    statusDiv.textContent = "Status: " + getServiceStateText(state);
    statusDiv.classList.add(getServiceStateClass(state));
    statusDiv.style.backgroundColor = getServiceStateColor(state);
  });

  let service = {
    links: [
      {
        domainType: "link",
        rel: "self",
        href: "http://192.168.88.91/monitoring/check_mk/api/1.0/objects/service/pve-TCP%2520Connections",
        method: "GET",
        type: "application/json",
      },
    ],
    domainType: "service",
    id: "pve-TCP Connections",
    title: "Service TCP Connections",
    members: {},
    extensions: {
      host_name: "pve",
      description: "TCP Connections",
      state: 0,
      state_type: 1,
      last_check: 1757963587,
    },
  };
</script>
{% endblock %}