<div class="container-list" id="container-list">
  {% for container in project.containers.all %}
    <article class="container-card" id="container-card">
      <div class="grid">
        <h3 class="container-title">{{ container.container_id }}</h3>
        {% if container.local_url and container.is_running %}
          <a class="open-button" href="{{ container.local_url }}" target="_blank">Open</a>
        {% endif %}
      </div>
      <div class="grid">
        <code>
          <strong>{{ container.image }}</strong>:{{ container.tag }}
        </code>
      </div>
      <div class="grid">
        <code class="info-pill"><strong>{{ container.ram }}GB</strong> RAM</code>
        <code class="info-pill"><strong>{{ container.cpus }}</strong> CPUs</code>
      </div>
      <hr>
      {% if container.is_running %}
        <div data-loading-states>
          <button hx-post="{% url 'stop_container' project.pk container.pk %}"
                  hx-target="#container-list"
                  hx-swap="outerHTML"
                  class="action-button secondary"
                  type="submit"
                  data-loading-aria-busy>Stop</button>
        </div>
      {% else %}
        <div data-loading-states>
          <button hx-post="{% url 'start_container' project.pk container.pk %}"
                  hx-target="#container-list"
                  hx-swap="outerHTML"
                  class="action-button primary"
                  type="submit"
                  data-loading-aria-busy>Start</button>
        </div>
      {% endif %}
      <div data-loading-states>
        <button hx-post="{% url 'delete_container' project.pk container.pk %}"
                hx-target="#container-list"
                hx-swap="outerHTML"
                class="action-button delete-button"
                type="submit"
                data-loading-aria-busy>Delete</button>
      </div>
    </article>
  {% empty %}
    <p>No containers have been created yet...</p>
  {% endfor %}
</div>
