{% extends 'base.html' %}

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

    <div class="row">
        <!-- <div class="col">
            <a href="{{ url_for('device.add') }}" class="btn btn-primary" style="margin-bottom: 10px;">
                <i class="bi bi-plus"></i>
                Add New Device
            </a>
        </div> -->
        <div class="col">
            {{ devices | length }} devices 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">Endpoints</th>
            <th scope="col">Drivers</th>
            <th scope="col">Status</th>
            <th scope="col">Configuration</th>
            <!-- <th scope="col"></th> -->
          </tr>
        </thead>
        <tbody>
            {% if devices %}
                {% for device in devices %}
                <tr>
                    <td>
                        <!-- <a href="{{ url_for('device.detail', device_uuid=device.device_id.device_uuid.uuid) }}"> -->
                            {{ device.device_id.device_uuid.uuid }}
                        <!-- </a> -->
                    </td>
                    <td>
                        {{ device.device_type }}
                    </td>
                    <td>
                        <ul>
                            {% for end_point in device.device_endpoints %}
                            <li>{{ end_point.endpoint_id.endpoint_uuid.uuid }}</li>
                            {% endfor %}
                        </ul>
                    </td>
                    <td>
                        <ul>
                            {% for driver in device.device_drivers %}
                            <li>{{ dde.Name(driver) }}</li>
                            {% endfor %}
                        </ul>
                    </td>
                    <td>{{ dose.Name(device.device_operational_status) }}</td>
                    <td>
                        <ul>
                            {% for config in device.device_config.config_rules %}
                            <li>
                                Key: {{ config.resource_key }}<br/>
                                Value: {{ config.resource_value }}
                            </li>
                            {% endfor %}
                        </ul>
                    </td>
                    <!-- <td>
                        <a href="{{ url_for('device.detail', device_uuid=device.device_id.device_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 devices found</td>
                </tr>
            {% endif %}
        </tbody>
    </table>

{% endblock %}