{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{% trans "Docker Manage Images - CyberPanel" %}{% endblock %}
{% block content %}

{% load static %}
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->


<div class="container" ng-controller="manageImages">

    <div id="page-title">
       <h2>{% trans "Create new container" %}
        <a href="{% url 'manageImages' %}" class="btn btn-info pull-right" title="{% trans 'Search new images and manage existing ones' %}">Manage Images</a>
        </h2>
    </div>
    
<div class="panel">
    <div class="panel-body">
        <h3 class="title-hero">
            {% trans "Locally Available Images" %} <img id="imageLoading" src="/static/images/loading.gif" style="display: none;">
        </h3><br>
        
        <div class="example-box-wrapper">
            
                <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="imageList">
                <thead>
                <tr>
                    <th>Name (Installed)</th>
                    <th>Tags</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                    
            {% for name, image in images.items %} 
                    <tr>
                        <td>{{image.name}}</td>
                        <td>
                            <select class="form-control tagList" id="{{forloop.counter}}" ng-model="imageTag['{{ image.name2 }}']">              
                                {% for tag in image.tags%}
                                <option>{{tag}}</option>
                                {% endfor %}
                            </select>
                        </td>
                        <td>
                            <a class="btn btn-primary" ng-href="/docker/runContainer/?image={{image.name}}&tag={$ imageTag['{{ image.name2 }}'] $}">{% trans "Create" %}</a>
                        </td>
                    </tr>
                    
            {% endfor %}                    
                                  
                </tbody>
                </table>

        </div>
    </div>
</div>



{% endblock %}