{% load helpers %}

{% block extra_styles %}
    <style>
        .card {
            border: none;
            box-shadow: none;
        }

        .table-responsive {
            overflow: visible;
        }
    </style>
{% endblock %}

<div class="nb-tiles">
    {% for row in table.page.object_list|default:table.rows %}
        <article class="nb-tile{% if not perms.extras.run_job or not row.record.runnable %} nb-disabled{% endif %}">
            <header class="nb-tile-header">
                <h3>{{ row.record.grouping|bettertitle }}</h3>

                {% if perms.extras.run_job and row.record.runnable %}
                    <a href="{% url 'extras:job_run' pk=row.record.pk %}"
                       class="btn btn-primary btn-sm p-2 rounded-circle"
                       data-bs-toggle="tooltip"
                       data-bs-title="Run/Schedule">
                        <span class="mdi mdi-play" aria-hidden="true"><span class="visually-hidden">Run/Schedule</span></span>
                    </a>
                {% else %}
                    <a aria-disabled="true"
                       class="btn btn-primary btn-sm disabled p-2 rounded-circle"
                       data-bs-toggle="tooltip"
                       data-bs-title="Run/Schedule">
                        <span class="mdi mdi-play" aria-hidden="true"><span class="visually-hidden">Run/Schedule</span></span>
                    </a>
                {% endif %}

                {% comment "TODO(norbert-mieczkowski-codilime): use the same buttons (actions) in tables and tiles when tables support dropdown menus" %}
                    {% for item in row.items %}
                        {% if item.0.name == "actions" %}
                            {{ item.1 }}
                        {% endif %}
                    {% endfor %}
                {% endcomment %}
                <div class="dropdown">
                    <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-title="Actions">
                        <span class="mdi mdi-dots-horizontal" aria-hidden="true"><span class="visually-hidden">Actions</span></span>
                    </button>
                    {% with request.path|add:"?display=tiles"|urlencode as return_url %}
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="{% url 'extras:job' pk=row.record.pk %}"><span class="mdi mdi-information-outline text-secondary" aria-hidden="true"></span>Details</a></li>
                            <li><a class="dropdown-item" href="{% url 'extras:job_changelog' pk=row.record.pk %}"><span class="mdi mdi-history text-secondary" aria-hidden="true"></span>Change log</a></li>
                            {% if perms.extras.change_job %}
                                <li><a class="dropdown-item" href="{% url 'extras:job_edit' pk=row.record.pk %}?return_url={{return_url}}"><span class="mdi mdi-pencil text-secondary" aria-hidden="true"></span>Edit</a></li>
                            {% endif %}
                            {% if perms.extras.delete_job %}
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="{% url 'extras:job_delete' pk=row.record.pk %}?return_url={{return_url}}"><span class="mdi mdi-trash-can-outline text-danger" aria-hidden="true"></span><span class="text-danger">Delete</span></a></li>
                            {% endif %}
                        </ul>
                    {% endwith %}
                </div>
            </header>

            <h2>{{ row.record.name }}</h2>

            <div class="nb-tile-description">{{ row.record.description|render_markdown }}</div>

            <footer class="nb-tile-footer">
                <div class="flex-fill">
                    Last run:
                    {% if row.record.latest_result %}
                        <a href="{{ row.record.latest_result.get_absolute_url }}">{{ row.record.latest_result.date_created|date:"DATETIME_FORMAT" }} by {{ row.record.latest_result.user }}</a>
                    {% else %}
                        <span class="text-secondary">Never</span>
                    {% endif %}
                </div>

                <div>
                    Last status:
                    {% include 'extras/inc/job_label.html' with result=row.record.latest_result %}
                </div>
            </footer>
        </article>
    {% empty %}
        {% if table.empty_text %}
            <div class="text-center text-secondary">
                &mdash; {{ table.empty_text }} &mdash;
            </div>
        {% endif %}
    {% endfor %}
</div>