{% extends "base.html" %}
{% block extrahead %}
<script src="/static/js/workflows/workflow.js"></script>
{% endblock %}
{% block content %}
<div class="row">
{% for resource in templates %}
    <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3">
        <div class="card h-100">
            <div class="card-header">
                <h3>{{resource.pod_name}}</h3>
            </div>
            <ul class="list-group list-group-flush h-100">
                <li class="list-group-item">Description: {{resource.pod_desc}}</li>
                <li class="list-group-item">Lab: {{resource.lab_name}}</li>
                <li class="list-group-item">Hosts: {% for h in resource.host_list %}{{h.hostname}}{% if not forloop.last %}, {% endif %}{% endfor %}</li>
                <li class="list-group-item">Networks: {% for n in resource.networks %}{{n.name}}{% if not forloop.last %}, {% endif %}{% endfor %}</li>

            </ul>
            <div class="card-footer">
                <button
                    class="btn btn-danger w-100"
                    onclick='delete_resource("{{resource.id}}");'
                    data-toggle="modal"
                    data-target="#resModal"
                >Delete</button>
            </div>
        </div>
    </div>
{% empty %}
    <div class="col">
        <p>You don't have any resources. You can create a resource by designing a pod.</p>
    </div>
{% endfor %}
</div>
<script>
    const user = "{{user}}"
    var current_resource_id = -1;
    function delete_resource(resource_id) {
        document.getElementById("confirm_delete_button").removeAttribute("disabled");
        current_resource_id = resource_id;
    }

    async function submit_delete_form() {
        if(LibLaaSAPI.deleteTemplate(current_resource_id)) {
            location.reload();
        } else {
            alert('Unable to delete template.');
        }
    }
</script>
<div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title d-inline float-left">Delete Resource?</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="res_delete_form">
                {% csrf_token %}
            </form>
            <div class="modal-footer d-flex flex-column">
                <div class="mb-2">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#warning">Delete</button>
                </div>
                <div class="collapse w-100 text-center border-top" id="warning">
                    <div class="p-4">
                        <h3 id="config_warning">Are You Sure?</h3>
                        <p id="warning_subtext">This cannot be undone</p>
                        <ul id="config_list"></ul>
                        <button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
                        <button class="btn btn-danger" id="confirm_delete_button" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}