{% extends "base.html" %}
{% block content %}
<section class="section">
    <h1 class="title">Docker Compose</h1>
    <div class="columns">
        <div class="column">
            <div class="box">
                <h2 class="subtitle">Available Services ({{ services | length }})</h2>
                <div class="list is-hoverable" style="max-height:500px;overflow-y:auto;">
                    {% for svc in services %}
                    <a class="list-item" href="/compose/{{ svc }}">{{ svc }}</a>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="column">
            <div class="box">
                <h2 class="subtitle">Deployed ({{ deployed | length }})</h2>
                <div class="list is-hoverable">
                    {% for svc in deployed %}
                    <a class="list-item" href="/compose/{{ svc }}">{{ svc }}</a>
                    {% endfor %}
                    {% if not deployed %}
                    <p class="has-text-grey">No services deployed yet.</p>
                    {% endif %}
                </div>
            </div>
            <div class="box mt-4">
                <h2 class="subtitle">Global Config</h2>
                <a class="button is-small" href="/compose/config">View / Edit Config</a>
            </div>
        </div>
    </div>
</section>
{% endblock %}