{% extends "base.html" %}
{% block content %}
    <div class="header-line">
        <h1>Projects</h1>
        {% if user.is_staff %}
            <a role="button" href="{% url 'admin:api_project_add' %}">Add</a>
        {% endif %}
    </div>
    <p>Below is an overview of all projects currently deployed via R-Shepard</p>
    <div class="project-list">
        {% for project in projects %}
            <article class="project-card">
                <div class="header-line">
                    <h4>{{ project.name }}</h4>
                    <a role="button" href="{% url 'project_detail' pk=project.pk %}">Open</a>
                </div>
                {% if project.description %}
                    <p>{{ project.description }}</p>
                {% else %}
                    <p>No description provided.</p>
                {% endif %}
            </article>
        {% empty %}
            <li class="info-pill">No projects available.</li>
        {% endfor %}
    </div>
    <hr>
    <div class="resource-usage">
        <h3>Resource Allocation Overview</h3>
        <p>
            Below is an overview of the accumulated RAM allocation of the
            R-Shepard instance. It displays the RAM usage of all currently
            running containers.
        </p>
        <div>
            <strong>{{ used_ram }}</strong> of <strong>{{ system_ram }}</strong> GB RAM currently allocated.
        </div>
        <div class="bar-container">
            <div class="bar ram" style="width: {{ ratio_used_ram_to_system_ram }}%">
                <span>{{ used_ram }} of {{ system_ram }}</span>
            </div>
        </div>
    </div>
    {% if user.is_staff %}
        <hr>
        <a class="secondary" role="button" href="{% url 'admin:index' %}">Go to admin area</a>
    {% endif %}
{% endblock %}
