{% extends 'base/layout.html' %}
{% load helpers %}

{% block title %}{{ service }}{% endblock %}

{% block content %}

{% include 'config_officer/navi_panel.html' %}

<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'plugins:config_officer:service_list' %}">Services</a></li>
        <li class="breadcrumb-item active">{{ service }}</li>
    </ol>
</nav>

<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="h3 mb-0">{{ service.name }}</h1>
    <div>
        <a href="{% url 'plugins:config_officer:service_edit' pk=service.pk %}" class="btn btn-warning">
            <i class="mdi mdi-pencil"></i> Edit
        </a>
        <a href="{% url 'plugins:config_officer:service_delete' pk=service.pk %}" class="btn btn-danger">
            <i class="mdi mdi-trash-can"></i> Delete
        </a>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header"><strong>Service details</strong></div>
    <table class="table table-hover mb-0">
        <tr>
            <th style="width:200px">Name</th>
            <td>{{ service.name|placeholder }}</td>
        </tr>
        <tr>
            <th>Description</th>
            <td>{{ service.description|placeholder }}</td>
        </tr>
    </table>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <strong>Rules</strong>
        <a href="{% url 'plugins:config_officer:service_rule_add' %}?service={{ service.pk }}&return_url={{ service.get_absolute_url }}"
            class="btn btn-primary btn-sm">
            <i class="mdi mdi-plus-thick"></i> Add a rule
        </a>
    </div>

    {% if service_rules %}
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>Device role</th>
                    <th>Device type</th>
                    <th>Template</th>
                    <th>Description</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for rule in service_rules %}
                <tr>
                    <td>
                        {% if rule.device_role.all %}
                        <ul class="list-unstyled mb-0">
                            {% for d_role in rule.device_role.all %}
                            <li>{{ d_role }}</li>
                            {% endfor %}
                        </ul>
                        {% else %}
                        <span class="text-muted">any</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if rule.device_type.all %}
                        <ul class="list-unstyled mb-0">
                            {% for d_type in rule.device_type.all %}
                            <li><a href="{{ d_type.get_absolute_url }}">{{ d_type }}</a></li>
                            {% endfor %}
                        </ul>
                        {% else %}
                        <span class="text-muted">any</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if rule.template %}
                        <a href="{{ rule.template.get_absolute_url }}">{{ rule.template }}</a>
                        {% else %}
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    <td>{{ rule.description|default:"—" }}</td>
                    <td class="text-end text-nowrap">
                        <a href="{% url 'plugins:config_officer:service_rule_edit' pk=rule.pk %}?return_url={{ service.get_absolute_url }}"
                            class="btn btn-warning btn-sm" title="Edit rule">
                            <i class="mdi mdi-pencil"></i>
                        </a>
                        <a href="{% url 'plugins:config_officer:service_rule_delete' pk=rule.pk %}?return_url={{ service.get_absolute_url }}"
                            class="btn btn-danger btn-sm" title="Delete rule">
                            <i class="mdi mdi-trash-can"></i>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="card-footer text-end">
        <a href="{% url 'plugins:config_officer:service_rule_add' %}?service={{ service.pk }}&return_url={{ service.get_absolute_url }}"
            class="btn btn-primary btn-sm">
            <i class="mdi mdi-plus-thick"></i> Add a rule
        </a>
    </div>
    {% else %}
    <div class="card-body text-muted">No rules defined yet.</div>
    {% endif %}
</div>

{% endblock %}