{% extends base_template %}
{% block page_title %}Dashboard Settings - {{ appbuilder.app_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h2>Dashboard Settings</h2>
            
            <!-- Add New Dashboard Button -->
            <div class="pull-right">
                <a href="./adddashboard" class="btn btn-primary">
                    <i class="fa fa-plus"></i> Add New Dashboard
                </a>
            </div>
            <br><br>
            <!-- Dashboard Table -->
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Dashboard Name</th>
                        <th>Description</th>
                        <th>Type</th>
                        <th>URL</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for dashboard in dashboards %}
                    {% set color = "primary" if dashboard.type == "public" else "info" if dashboard.type == "private" else "secondary" %}
                    <tr>
                        <td>{{ dashboard.name }}</td>
                        <td>{{ dashboard.description or 'No description' }}  </td>
                        <td><span class="label label-{{ color }}">{{ dashboard.type }}</span></td>
                        <td><a href="./view/{{ dashboard.id }}"   
                            title=""  >{{ dashboard.url }}</a></td>
                        <td>
                           

                            <a href="./editdashboard/{{ dashboard.id }}"   
                            title="" aria-label="Edit Dashboard" 
                            class="btn btn-sm btn-default btn-icon-only" 
                            data-original-title="Edit&nbsp;Dashboard">
                                <span class="fa-solid fa-pen" aria-hidden="true"></span>
                            </a>
                             
                            <a href="./deletedashboard/{{ dashboard.id }}" 
                             onclick="return confirmDeleteDag(this, 'conditional_dataset_and_time_based_timetable')" 
                             title="" aria-label="Delete Dashboard" 
                             class="btn btn-sm btn-default btn-icon-only" 
                             data-original-title="Delete&nbsp;Dashboard">
                                <span class="material-icons text-danger" aria-hidden="true">delete_outline</span>
                            </a>

                            

                             
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="text-center">No dashboards found.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    function confirmDeleteDag(link, dagId) {
        if (confirm("Are you sure you want to delete this dashboard?")) {
            return true;
        }
        return false;
    }
</script>
{% endblock %}