WebTech/application/dash/templates/dashboard.html

{% 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">
            <div class="col" onclick="location.href='{{service.url}}';" style="cursor: pointer;">
                {{service["name"]}}
            </div>

            <div class="col-sm-3 dots dropdown">
                <button class="btn btn-light py-0" 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_service', 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-sm-9" onclick="location.href='{{service.url}}';" style="cursor: pointer;">
                <img class="fit-picture" src="{{ url_for('static', filename='icons/'+service['icon'])}}"
                    onerror="this.onerror=null; this.src='{{url_for('static', filename='google.png')}}';">
            </div>
        </div>
        <div class="row">
            <div class="col url text-break" onclick="location.href='{{service.url}}';" style="cursor: pointer;">
                {{service["url"]}}
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{%endblock%}