{% extends "base_template.html" %}

{%block title%}Dashboard{%endblock%}

{%block content%}
<div class="grid-container">
    {% for service in services%}
    <div class="bg-light container-xxl">
        <div class="row row-cols-3">
            <div class="col-sm-2" onclick="location.href='{{service.url}}';" style="cursor: pointer;">
                <img class="fit-picture" src="{{ url_for('static', filename='icons/'+service['icon'])}}">
            </div>
            <div class="col-sm-10">
                <div class="row">
                    <div class="col-sm-10" onclick="location.href='{{service.url}}';" style="cursor: pointer;">
                        {{service["name"]}}
                    </div>
                    <div class="col-sm-2 dots dropdown">
                        <button class="btn btn-light" type="button" id="threeDotDropdown" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            &#x22EE;
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="threeDotDropdown">
                            <li>
                                <a class="dropdown-item" href="{{ url_for('dash.edit_service', service_id=service.id) }}">Edit</a>
                            </li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li>
                                <form action="{{ url_for('dash.delete_item', service_id=service.id) }}" method="POST" style="display:inline;">
                                    <button style="color: red;" type="submit" class="dropdown-item">Delete</button>
                                </form>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col" onclick="location.href='{{service.url}}';" style="cursor: pointer;">
                        {{service["url"]}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{%endblock%}