{% extends "layout.html" %}
{% block body %}


<h1><a href="/">Dashboard</a> &raquo; {{ client_name }} &raquo; Containers</h1>


<a class="button--link" href="/{{ client_name }}/containers/all">All Containers</a>
<a class="button--link" href="/{{ client_name }}/containers/paused">Paused Containers</a>
<a class="button--link" href="/{{ client_name }}/containers">Running Containers</a>
<a class="button--link" href="/{{ client_name }}/containers/exited">Stopped Containers</a>


<input type="text" class="search_table" placeholder="search">


<h2>{{ currentComposerProject }}</h2>


{% for container in containers %}


{% if (loop.first) or (loop.previtem.attrs.Config.Labels['com.docker.compose.project'] != container.attrs.Config.Labels['com.docker.compose.project']) %}


<h2>
    <a href="{{ url_for('containers_compose_action', client_name=client_name, compose_project=container.attrs.Config.Labels['com.docker.compose.project']) }}">{{
        container.attrs.Config.Labels['com.docker.compose.project'] }}</a></h2>
{% endif%}

<!--<table>-->
<!--<thead>-->
<!--<tr>-->
<!--<th>COMPOSE PROJECT</th>-->
<!--<th>CONTAINER ID</th>-->
<!--<th>NAME</th>-->
<!--<th>COMMAND</th>-->
<!--<th>CREATED</th>-->
<!--<th>STATUS</th>-->
<!--<th>PORTS</th>-->
<!--<th>IMAGE</th>-->
<!--</tr>-->
<!--</thead>-->
<!--<tbody>-->


<div class="details">
    <div>
        <div class="details__status details__status--{{ container.status }}">{{ container.status }}</div>
        <div class="details__name"><a class="button--link"
                                      href="/{{ client_name }}/containers/id/{{ container.short_id }}">{{
            container.name
            }}</a></div>
        <div class="details__id"><span title="{{ container.id }}">ShortID: {{ container.short_id }}</span></div>
    </div>
    <div>
        <div class="details__created">{{ container.attrs['Created'][0:19] }}</div>
        <div class="details__entrypoint">{{ container.attrs['Config']['Entrypoint'][0] }}</div>
        <div class="details__image">{{ container.attrs['Config']['Image'] }}</div>
    </div>
    <div class="details__more-info">
        <div class="more-info__ports">
            {% for port in container.attrs['NetworkSettings']['Ports'] %}
            {{ port }}
            {% if container.attrs['NetworkSettings']['Ports'][port] is not none %}

            {% if container.attrs['NetworkSettings']['Ports'][port] is not none and
            container.attrs['NetworkSettings']['Ports'][port]|length > 0 %}
            {% for port_exposed in container.attrs['NetworkSettings']['Ports'][port] %}
            ->{{ port_exposed['HostIp'] }}:{{ port_exposed['HostPort'] }}

            {% endfor %}
            {% endif %}
            {% endif %}
            {% endfor %}
        </div>
    </div>
    <div>


    </div>
    <div class="details__controll">
        <a class="button--link" href="/{{ client_name }}/containers/log/{{ container.short_id }}">log</a>
        <a class="button--link" href="/{{ client_name }}/containers/export/{{ container.short_id }}">export</a>
        {% if (container.status == 'exited') or (container.status == 'created') %}
        <a class="button--link" href="/{{ client_name }}/containers/start/{{ container.short_id }}">start</a>
        <a class="button--link" href="/{{ client_name }}/containers/remove/{{ container.short_id }}">remove</a>
        {% endif %}

        {% if container.status == 'running' %}
        <a class="button--link" href="/{{ client_name }}/containers/stop/{{ container.short_id }}">stop</a>
        <a class="button--link" href="/{{ client_name }}/containers/restart/{{ container.short_id }}">restart</a>
        <a class="button--link" href="/{{ client_name }}/containers/top/{{ container.short_id }}">top</a>
        {% endif %}
    </div>
</div>

{% else %}
<div>
    <div>
        no containers
    </div>
</div>

{% endfor %}


{% endblock %}