{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{% trans "Containers List - CyberPanel" %}{% endblock %}
{% block content %}

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


<div class="container">

    <div id="page-title">
       <h2 id="domainNamePage">{% trans "List Containers" %}
        <a class="pull-right btn btn-primary" href="{% url "containerImage" %}">Create</a>
       </h2>
       <p>{% trans "Manage containers on server" %}</p>
    </div>

<div class="panel">
    <div class="panel-body">
        <h3 class="content-box-header">
            {% trans "Containers" %} <img id="imageLoading" src="/static/images/loading.gif" style="display: none;">
        </h3>
        <div ng-controller="listContainers" class="example-box-wrapper table-responsive">

                <table cellpadding="0" cellspacing="0" border="0" class="table table-striped" id="datatable-example" style="padding:0px;">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Launch</th>
                    <th>Owner</th>
                    <th>Image</th>
                    <th>Tag</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>

                <tr ng-repeat="web in ContainerList track by $index">
                    <td ng-bind="web.name"></td>
                    <td><a href="/docker/view/{$ web.name $}"><img width="30px" height="30" class="" src="{% static 'baseTemplate/assets/image-resources/webPanel.png' %}"></a></td>
                    <td ng-bind="web.admin"></td>
                    <td ng-bind="web.image"></td>
                    <td ng-bind="web.tag"></td>
                    <td>
                        <button class="btn btn-primary" ng-click="delContainer(web.name)"><i class="fa fa-trash btn-icon"></i></button>
                        <button class="btn btn-primary" ng-click="showLog(web.name)"><i class="fa fa-file btn-icon"></i></button>
                    </td>
                </tr>

                </tbody>
                </table>


        <div id="listFail" class="alert alert-danger">
            <p>{% trans "Error message:" %} {$ errorMessage $}</p>
        </div>

            <div class="row text-center">

                            <div class="col-sm-4 col-sm-offset-8">

                                <nav aria-label="Page navigation">
                                      <ul class="pagination">


                                            {% for items in pagination %}

                                                <li ng-click="getFurtherContainersFromDB({{ forloop.counter }})" id="webPages"><a href="">{{ forloop.counter }}</a></li>

                                            {% endfor %}

                                      </ul>
                                    </nav>


                            </div>


                        </div>

            {% if showUnlistedContainer %}
            <h3 class="title-hero">
                {% trans "Unlisted Containers" %} <i class="fa fa-question-circle" title="{% trans "Containers listed below were either not created through panel or were not saved to database properly" %}"></i>
            </h3>

            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="datatable-example">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>

                {% for container in unlistedContainers %}
                    <tr>
                        <td>{{container.name}}</td>
                        <td>{{container.status}}</td>
                        <td>
                            <button class="btn btn-primary" ng-click="delContainer('{{container.name}}', true)"><i class="fa fa-trash"></i></button>
                            <button class="btn btn-primary" ng-click="showLog('{{container.name}}')"><i class="fa fa-file"></i></button>
                            <button class="btn btn-primary" ng-click="assignContainer('{{container.name}}')"><i class="fa fa-user"></i></button>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
                </table>

            {% endif %}

<div id="logs" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Container logs</h4>
      </div>
      <div class="modal-body">
        <textarea name="logs"  class="form-control" id="" cols="30" rows="10">{$ logs $}</textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" ng-click="showLog('', true)">Refresh</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<div id="assign" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Assign Container to user</h4>
      </div>
      <div class="modal-body">
        <form action="/" class="form-horizontal">
            <div ng-hide="installationDetailsForm" class="form-group">
                <label class="col-sm-3 control-label">{% trans "Select Owner" %}</label>
                <div class="col-sm-6">
                    <select ng-model="dockerOwner" class="form-control">
                        {% for user in adminNames %}
                            <option>{{user}}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" ng-click="submitAssignContainer()">Submit</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

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






{% endblock %}