{% extends "base.html" %}
{% load i18n %}
{% block title %}{{ service_name }} {% translate "Service Control" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{{ service_name }} {% translate "Service Control" %}</h1>
            <div class="eenos-page-subtitle">{% blocktranslate with name=service_name %}Monitor and control the {{ name }} system service.{% endblocktranslate %}</div>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "System" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Service Restart" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{{ service_name }}</span>
    </nav>
    {% include "includes/service_alerts.html" %}
    <div class="eenos-card">
        <div class="row g-4 align-items-center">
            <div class="col-12 col-xl-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="eenos-modal-info-icon flex-shrink-0">
                        <i data-lucide="server-cog"></i>
                    </div>
                    <div class="min-w-0">
                        <div class="text-muted small mb-1">{% translate "System Service" %}</div>
                        <h2 class="h5 mb-1">{{ service_name }}</h2>
                        <div class="font-monospace small text-muted text-break">{{ servicestatus.service|default:service_name }}</div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-9">
                <div class="row g-3">
                    <div class="col-12 col-sm-6 col-xl-3">
                        <div class="border rounded-3 p-3 h-100">
                            <div class="text-muted small mb-2">{% translate "Current State" %}</div>
                            {% if status == "active" %}
                                <span class="eenos-status text-success"><i data-lucide="circle-check"></i><span>{% translate "Active" %}</span></span>
                            {% else %}
                                <span class="eenos-status text-danger"><i data-lucide="circle-x"></i><span>{% translate "Inactive" %}</span></span>
                            {% endif %}
                            <div class="small text-muted mt-2 text-break">{{ servicestatus.status|default:"—" }}</div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-xl-3">
                        <div class="border rounded-3 p-3 h-100">
                            <div class="text-muted small mb-2">{% translate "Uptime / Downtime" %}</div>
                            <div class="fw-semibold text-break">{{ servicestatus.uptime|default:"—" }}</div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-xl-3">
                        <div class="border rounded-3 p-3 h-100">
                            <div class="text-muted small mb-2">{% translate "State Since" %}</div>
                            <div class="fw-semibold text-break">{{ servicestatus.since|default:"—" }}</div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-xl-3">
                        <div class="border rounded-3 p-3 h-100">
                            <div class="text-muted small mb-2">{% translate "Memory Usage" %}</div>
                            <div class="fw-semibold text-break">{{ servicestatus.memory|default:"Unknown" }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr class="my-4">
        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
            <div>
                <div class="fw-semibold">{% translate "Service Actions" %}</div>
                <div class="text-muted small">{% translate "Select an operation to manage this system service." %}</div>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <button type="button"
                        class="btn btn-outline-success service-command"
                        data-action="start"><i data-lucide="play"></i>{% translate "Start" %}</button>
                <button type="button"
                        class="btn btn-outline-warning service-command"
                        data-action="restart"><i data-lucide="refresh-cw"></i>{% translate "Restart" %}</button>
                <button type="button"
                        class="btn btn-outline-danger service-command"
                        data-action="stop"><i data-lucide="square"></i>{% translate "Stop" %}</button>
                <button type="button"
                        class="btn btn-outline-secondary service-command"
                        data-action="status"><i data-lucide="terminal"></i>{% translate "View Status" %}</button>
            </div>
        </div>
    </div>
    <form method="post" id="serviceCommandForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="action" id="serviceAction">
        <input type="hidden" name="service" value="{{ service_key }}">
    </form>
    <div class="modal fade"
         id="serviceCommandModal"
         tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="serviceCommandTitle"></h2>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-notice eenos-notice-warning">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{{ service_name }}</div>
                            <div class="eenos-notice-text" id="serviceCommandText"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" class="btn btn-warning" id="confirmServiceCommand"></button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){const labels={start:{title:"{% translate 'Start Service' %}",text:"{% translate 'Start this service now?' %}",button:"{% translate 'Start Service' %}",style:'btn-success'},restart:{title:"{% translate 'Restart Service' %}",text:"{% translate 'Restarting may briefly interrupt active connections. Continue?' %}",button:"{% translate 'Restart Service' %}",style:'btn-warning'},stop:{title:"{% translate 'Stop Service' %}",text:"{% translate 'Stopping this service may interrupt dependent applications. Continue?' %}",button:"{% translate 'Stop Service' %}",style:'btn-danger'},status:{title:"{% translate 'View Service Status' %}",text:"{% translate 'Request the latest detailed status from the service manager?' %}",button:"{% translate 'View Status' %}",style:'btn-primary'}};let action='';const modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('serviceCommandModal'));$('.service-command').on('click',function(){action=$(this).data('action');const item=labels[action];$('#serviceCommandTitle').text(item.title);$('#serviceCommandText').text(item.text);$('#confirmServiceCommand').removeClass('btn-success btn-warning btn-danger btn-primary').addClass(item.style).text(item.button);modal.show();});$('#confirmServiceCommand').on('click',function(){$('#serviceAction').val(action);document.getElementById('serviceCommandForm').submit();});});
    </script>
{% endblock %}