{% extends "superset/base.html" %}

{% block editModal %}
{% for dashboard in dashboards %}
{% if not dashboard.status == "published" %}
{% if not dashboard.status == "deleted" %}
<div class="modal fade" id="dashboardModal{{dashboard.id}}" tabindex="-1" role="dialog" aria-labelledby="dashboardModalLabel{{dashboard.id}}{{dashboard.id}}"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h6 text-dark" id="dashboardModalLabel{{dashboard.id}}">Edit dashboard</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form method="POST" action="{{url_for('dashboards.update_dashboard', dashboard_pk=dashboard.id, workspace_pk=dashboard.workspace_id, dashboard_status=dashboard.status)}}">
                <div class="modal-body">
                    <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <label for="dashboardLable{{dashboard.id}}">Dashboard name</label>
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                            <input type="text" name="title" class="form-control" id="dashboardLable{{dashboard.id}}" value="{{dashboard.title}}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="dashIDLable{{dashboard.descriptive_id}}">ID</label>
                            <input type="text" name="descriptive_id" maxlength="3" class="form-control" id="dashIDLable{{dashboard.descriptive_id}}" value="{{dashboard.descriptive_id}}" required>
                        </div>
                    </div>
                    <label for="dashTags{{dashboard.id}}">Tags</label>
                    <input
                            type="text"
                            name="tags"
                            class="form-control"
                            id="dashTags{{dashboard.id}}"
                            value="{% for tag in dashboard.tags %}{{tag.title}},{% endfor %}"
                            data-role="tagsinput"/>

                </div>
                <div class="modal-footer">
                    <button class="btn btn-light text-uppercase" type="button" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-info text-uppercase">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}
{% endif %}
{% endfor %}
{% endblock editModal %}


{% block imgPreviewModal %}
{% for dashboard in dashboards %}
<div class="modal fade" id="imgModal{{dashboard.id}}" tabindex="-1" role="dialog" aria-labelledby="dashboardModalLabel{{dashboard.id}}"
     aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h6 text-dark" id="dashboardModalLabel{{dashboard.id}}">Preview image</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <img src="{{ url_for('static', filename='img/test/quality-of-values-over-time-2023-02-01T17-06-30.822Z.jpg') }}" class="img-fluid" alt="image preview of dashboard">
            </div>
            <div class="modal-footer">
                <button class="btn btn-light text-uppercase" type="button" data-dismiss="modal">Back</button>
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endblock imgPreviewModal %}


{% block subheading %}
<div class="container-fluid bg-white mb-4">
    <div class="d-sm-flex align-items-center justify-content-between navbar navbar-light navbar-title">
        <a class="navbar-brand">Dashboard</a>
        <a id="bulkEditBtn" href="#" class="d-inline-block bg-cyan btn btn-sm btn-info shadow-sm text-uppercase px-4"><i
                class="fas fa-check fa-sm text-white-50"></i> Make compliant</a>
    </div>
</div>
{% endblock subheading %}


{% block mainContent %}
<div class="card border-0 mb-4">
    <div class="py-3 px-3 d-flex flex-row align-items-center justify-content-end">
        <div class="dropdown no-arrow">
            <a class="dropdown-toggle btn btn-light btn-circle" href="#" role="button" id="dropdownMenuLinkDashboard"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-700"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
                 aria-labelledby="dropdownMenuLinkDashboard">
                <a class="dropdown-item  text-capitalize {% if not dashboards %}disabled{% endif %}" href="{{url_for('dashboards.refresh_cache_dashboard', workspace_id=workspace_id)}}">
                    Refresh Cache
                </a>
            </div>
        </div>
    </div>

    <!-- Bulk edit form -->
    <form method="POST" action="{{url_for('dashboards.make_compliant', workspace_pk=workspace_id)}}">
        <div id="bulkEditHeader" class="card-header border-0 bg-cyan-light d-none">

            <div class="container-fluid">
                <div class="d-sm-flex align-items-start justify-content-start">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <button id="bulkEditHeaderCancel" class="btn btn-secondary btn-sm text-uppercase m-1 px-5"> Cancel </button>
                    <button type="submit" class="btn btn-info btn-sm text-uppercase m-1 px-5"> Submit </button>
                </div>
            </div>
        </div>
        <div class="card-body">

            <div class="table-responsive">
                <table class="table table-hover table-sm align-middle" id="dataTable" width="100%" cellspacing="0">
                    <thead class="text-dark">
                    <tr>
                        <th class="align-bottom selector form-selector d-none" style="width: 4%">
                            <input type="checkbox" name="selectAll" id="selectAllDomainList" />
                        </th>
                        <th style="width: 4%">ID</th>
                        <th style="width: 16%">Tags</th>
                        <th style="width: 10%">Airflow runs</th>
                        <th style="width: 16%">Title</th>
                        <th style="width: 10%">Last modified by</th>
                        <th style="width: 10%">Status</th>
                        <th style="width: 10%">Created by</th>
                        <th style="width: 10%">Owners</th>
                        <th style="width: 10%">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for dashboard in dashboards %}
                    <tr>
                        <td class="align-middle selector form-selector d-none">
                            <input type="checkbox" name="dashboard_id" value="{{dashboard.id}}" />
                        </td>
                        <td class="text-cyan align-middle">
                            <button type="button" class="btn btn-sm btn-light m-1" disabled>{{dashboard.descriptive_id}}</button>
                        </td>
                        <td>
                            {% for tag in dashboard.tags %}
                                <button type="button" class="btn btn-sm btn-outline-secondary m-1 rounded-pill" style="border-color: {{tag.color}}; color: {{tag.color}}" disabled> <span class="border-0 rounded-circle d-inline-block" style="background-color: {{tag.color}};width: 7px;height: 7px;"></span> {{tag.title}}</button>
                            {% endfor %}
                        </td>
                        <td class="align-middle">
                            {% if dashboard.status != "deleted" %}
                                N/A
                            {% else %}
                                <a href="{{dashboard.airflow_url()}}" class="btn btn-light btn-icon-split">
                                                <span class="icon text-white-50">
                                                    <img src="{{ url_for('static', filename='img/airflow_logo.png') }}" width="20" height="20" alt="Airflow logo"/>
                                                </span>
                                    <span class="text">{{dashboard.task.run_id}}</span>
                                </a>
                            {% endif %}
                        </td>
                        <td class="align-middle">
                            {% if dashboard.status != "deleted" %}
                                <a class="text-cyan" href="{{dashboard.superset_url()}}">{{dashboard.title}}</a>
                            {% else %}
                                {{dashboard.title}}
                            {% endif %}
                        </td>
                        <td class="align-middle">{{dashboard.last_saved_by}}</td>
                        <td class="align-middle">
                            {% if dashboard.status == "published" %}
                            <span class="icon text-white-50">
                                <img src="{{ url_for('static', filename='img/published.png') }}" width="15" height="15" alt="Published badge"/>
                                                            </span>
                            {% endif %}
                            {{dashboard.status}}
                        </td>
                        <td class="align-middle">{{dashboard.created_by}}</td>
                        <td class="owners align-middle">
                            {% for owner in dashboard.owners %}
                                <button type="button" class="btn btn-sm btn-circle m-1 text-uppercase text-light" style="background-color: {{owner.color}}">{{owner.first_name[:1]}}{{owner.last_name[:1]}}</button>
                            {% endfor %}
                        </td>
                        <td class="align-middle">
                            {% if dashboard.status != "deleted" %}
                                {% if dashboard.status == "published" %}
                                <button type="button" class="btn btn-sm btn-light m-1" disabled>Cannot Edit</button>
                                {% else %}
                                <a href="#" data-toggle="modal" data-target="#dashboardModal{{dashboard.id}}" class="btn btn-info btn-icon-split btn-sm">
                                                                    <span class="icon text-white-50">
                                                                        <i class="fas fa-flag"></i>
                                                                    </span>
                                    <span class="text">Edit naming</span>
                                </a>
                                {% endif %}
                            {% else %}
                                <a href="#" data-toggle="modal" data-target="#imgModal{{dashboard.id}}" class="btn btn-secondary btn-icon-split btn-sm">
                                                                    <span class="icon text-white-50">
                                                                        <i class="fas fa-arrow-right"></i>
                                                                    </span>
                                    <span class="text">Preview available</span>
                                </a>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </form>
</div>
{% endblock mainContent %}