{% extends "base.html" %}
{% load static %}
{% block head %}
    <link rel="stylesheet" href="{% static "list.css" %}">
    <script src="{% static "list.js" %}"></script>
    {% block extra-head %}{% endblock %}
{% endblock %}
{% block main %}
    {% csrf_token %}
    <div class="list-wrapper">
        <div class="list-header">
            <button class="new">New {{ class_name }}</button>
        </div>
        <ul class="list">
            {% for element in elements %}
                <li data-id="{{ element.id }}" data-name="{% block element-name %}{% endblock %}" class="{% block extra-class %}{% endblock %}">
                    {% block element %}{% endblock %}
                    <div class="actions">
                        {% block actions %}{% endblock %}
                    </div>
                </li>
            {% empty %}
                <li class="empty">No {{ class_name }} defined yet</li>
            {% endfor %}
        </ul>
    </div>
    <div class="popup" id="delete-popup">
        <div class="popup-container">
            <h2 class="title">Delete <span class="elmt-name"></span> ?</h2>
            <p class="desc">{% block delete-desc %}{% endblock %}</p>
            <div class="actions">
                <button class="cancel">Cancel</button>
                <button class="delete">Delete</button>
            </div>
        </div>
    </div>
{% endblock %}