{% 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 id="domainNamePage">{% trans "Manage Images" %}
        <a class="pull-right btn btn-primary" href="{% url "containerImage" %}">Create Container</a>
        </h2>
       <p>{% trans "On this page you can manage docker images." %}</p>
    </div>

<div id="history" class="modal fade" role="dialog">
  <div class="modal-dialog" style="width:96%">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Image history</h4>
      </div>
      <div class="modal-body">
        <table cellpadding="0" cellspacing="0" border="0" class="table table-responsive table-striped" id="datatable-example" style="padding:0px;">
            <thead>
            <tr>
                <th>ID</th>
                <th>CreatedBy</th>
                <th>Created</th>
                <th>Comment</th>
                <th>Size</th>
            </tr>
            </thead>
            <tbody>

            <tr ng-repeat="history in historyList track by $index">
                <th style="word-break: break-all;" ng-bind="history.Id"></th>
                <th style="word-break: break-all;" ng-bind="history.CreatedBy"></th>
                <th ng-bind="history.Created"></th>
                <th ng-bind="history.Comment"></th>
                <th ng-bind="history.Size"></th>

            </tr>

            </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<div class="panel">
    <div class="panel-body">
        <h3 class="content-box-header">
            {% trans "Images" %}
            {% trans "Images" %} <img id="imageLoading" src="/static/images/loading.gif" style="display: none;">
        <button class="btn btn-warning pull-right" ng-click="rmImage(0)" title="{% trans 'Delete unused images' %}">Prune</button>
        </h3><br>

        <div class="row mx-10">
            <label class="col-sm-2 control-label text-right">Search Image</label>
            <div class="col-sm-6">
                <input type="text" ng-change="searchImages()" ng-model="searchString" class="form-control">
            </div>
            <div class="col-sm-2"></div>
        </div>
        <br>

        <div class="example-box-wrapper table-responsive">

            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped " id="searchResult" style="padding:0px;">
                <thead>
                <tr>
                    <th>Name (search)</th>
                    <th>Tags</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>


                <tr ng-repeat="image in images track by $index">
                    <td>
                        <span ng-bind="image.name"></span>
                        <span ng-show="image.is_official == true"><i class="fa fa-check-circle btn-icon" title="{% trans 'Official image' %}"></i></span>
                        <!--<span><i class="fa fa-exclamation-circle" ng-attr-title="{$ image.description $}"></i></span>-->

                    </td>
                    <td>
                        <select ng-focus="loadTags($event)" ng-click="selectTag()" ng-model="imageTag[image.name2]" ng-options="tag for tag in tagList[image.name2]" ng-attr-id="{$ image.name2 $}" data-pageloaded='0' class="form-control ng-pristine ng-valid ng-empty ng-touched">
                        </select>
                    </td>
                    <td>
                        <a ng-click="pullImage(image.name, imageTag[image.name2])" class="btn btn-primary">{% trans "Pull" %}</a>
                    </td>
                </tr>

                </tbody>
                </table>

                <table cellpadding="0" cellspacing="0" border="0" class="table table-striped " id="imageList" style="padding:0px;">
                <thead>
                <tr>
                    <th>Name (Locally Available)</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}}">
                                {% for tag in image.tags%}
                                <option>{{tag}}</option>
                                {% endfor %}
                            </select>
                        </td>
                        <td>
                            <button class="btn btn-primary" title="History" ng-click="getHistory({{forloop.counter}})"><i class="fa fa-history btn-icon"></i></button>
                            <button class="btn btn-primary" title="Delete" ng-click="rmImage({{forloop.counter}})"><i class="fa fa-trash btn-icon"></i></button>
                        </td>
                    </tr>

            {% endfor %}

                </tbody>
                </table>

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



{% endblock %}