{% extends 'base.html' %}

{% block content %}
    <h1>Services</h1>

    <div class="row">
        <!-- <div class="col">
            <a href="{{ url_for('service.add') }}" class="btn btn-primary" style="margin-bottom: 10px;">
                <i class="bi bi-plus"></i>
                Add New Service
            </a>
        </div> -->
        <div class="col">
            {{ services | length }} services found in context <i>{{ session['context_uuid'] }}</i>
        </div>
        <!-- <div class="col">
            <form>
                <div class="input-group">
                    <input type="text" aria-label="Search" placeholder="Search..." class="form-control"/>
                    <button type="submit" class="btn btn-primary">Search</button>
                  </div>
            </form>
        </div> -->
    </div>
    

    <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Type</th>
            <th scope="col">End points</th>
            <th scope="col">Constraints</th>
            <th scope="col">Status</th>
            <th scope="col">Configuration</th>
            <!-- <th scope="col"></th> -->
          </tr>
        </thead>
        <tbody>
            {% if services %}
                {% for service in services %}
                <tr>
                    <td>
                        <!-- <a href="{{ url_for('service.detail', service_uuid=service.service_id.service_uuid.uuid) }}"> -->
                            {{ service.service_id.service_uuid.uuid }}
                        <!-- </a> -->
                    </td>
                    <td>
                        {{ ste.Name(service.service_type) }}
                    </td>
                    <td>
                        <ul>
                            {% for end_point in service.service_endpoint_ids %}
                            <li>{{ end_point.device_id.device_uuid.uuid }} / {{ end_point.endpoint_uuid.uuid }}</li>
                            {% endfor %}
                        </ul>
                    </td>
                    <td>
                        <ul>
                            {% for constraint in service.service_constraints %}
                            <li>{{ constraint.constraint_type }}: {{ constraint.constraint_value }}</li>
                            {% endfor %}
                        </ul>
                    </td>
                    <td>{{ sse.Name(service.service_status.service_status) }}</td>
                    <td>
                        <ul>
                            {% for rule in service.service_config.config_rules %}
                            <li>
                                Key: {{ rule.resource_key }}
                                <br/>
                                Value: {{ rule.resource_value }}
                            </li>
                            {% endfor %}
                        </ul>
                    </td>
                    <!-- <td>
                        <a href="{{ url_for('service.detail', service_uuid=service.service_id.service_uuid.uuid) }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                            </svg>
                        </a>
                    </td> -->
                </tr>
                {% endfor %}
            {% else %}
                <tr>
                    <td colspan="7">No services found</td>
                </tr>
            {% endif %}
        </tbody>
    </table>

{% endblock %}