{% extends 'frontend/console/base.html' %}
{% load i18n %}

{% block security_selected %} selected {% endblock %}
{% block sshKey_selected %} selected {% endblock %}

{% load staticfiles %}

{% block cssAppend %}
    <link rel="stylesheet" type="text/css" href="{% static 'frontend/css/lib/disk-slider.css' %}">
{% endblock %}

{% block ng-app %}ng-app="sshKey"{% endblock %}

{% block content %}
<div class="wrapper" ng-controller="sshKeyCtrl">
    <div class="main-head">
        <h3 class="main-title">{% trans "SSHKey" %}</h3>
        <div class="main-abstract">
            <p>{% trans "SSHKey provides sshkey generation and binding service. And of course, only instance based Linux can bind sshkey and only one sshkey. Please Contact customer service If your resource is 'UnKonwn'." %}</p>
        </div>
    </div>
    <div class="toolbar">
        <ul>
            <li><a href="javascript:;" class="btn btn-primary" ng-click="request()" >{% trans "Create" %}</a></li>
            <li><a href="javascript:;" class="btn btn-success" ng-disabled="checkbox()" ng-click="modify()" >{% trans "Modify" %}</a></li>
            <li><a href="javascript:;" class="btn btn-success" ng-disabled="checkbox()" ng-click="bind()" >{% trans "Bind" %}</a></li>
            <li><a href="javascript:;" class="btn btn-success" ng-disabled="checkbox()" ng-click="delete()" >{% trans "Delete" %}</a></li>
            <li><a href="javascript:;" class="btn btn-danger" ng-disabled="checkbox()" ng-click="download()">{% trans "Download SSHKey" %}</a></li>
            <li class="pull-right"><a href="javascript:;" class="btn icon-refresh" title="{% trans 'reload' %}" ng-click="reload()"></a></li>
        </ul>
    </div>
    
    <div class="pane">
        <table class="table table-list">
            <thead>
                <tr>
                    <th></th>
                    <th>ID</th>
                    <th>{% trans "Name" %}</th>
                    <th>{% trans "Status" %}</th>
                    <th>{% trans "Created" %}</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="sshKey in sshKeys">
                    <td>
                        <input type="radio" name="selected" ng-click="select(sshKey)" ng-if="isStable(sshKey)">
                        <span class="icon-loader" ng-if="!isStable(sshKey)"></span>
                    </td>
                    <td><a href="./{[{sshKey.fakeid}]}">{[{sshKey.fakeid}]}</a></td>
                    <td>{[{sshKey.sshkeyname}]}</td>
                    <td>{[{sshKey.status}]}</td>
                    <td>{[{sshKey.createtime}]}</td>
                </tr>
            </tbody>
            
        </table>
        <div class="row page-nav" ng-show="sshKeys">
            <ul class="pagination" >
                <li ng-class="{disabled: page==1}"><a href="javascript:;" ng-click="page==1 || pageFirst()">{% trans "Index" %}</a></li>
                <li ng-click="page==1 || pagePre()"  ng-class="{disabled: page==1}"><a href="javascript:;">{% trans "Pre"%}</a></li>
                <li class="disabled"><a href="javascript:;">{% trans "NO"%}{[{page || 0}]}{% trans "Page" %}、{% trans "Total" %}{[{pages || 0}]}{% trans "Page" %}、{[{total || 0}]}{% trans "Results" %}</a></li>
                <li ng-click="page==pages || pageNext()" ng-class="{disabled: page==pages}"><a href="javascript:;">{% trans "Next" %}</a></li>
                <li ng-class="{disabled: page==pages}"><a href="javascript:;" ng-click="page==pages || pageLast()">{% trans "Last" %}</a></li>
            </ul>
        </div>
    </div>
        
    </div>


{% endblock %}

{% block jsAppend %}
    <script src="{% static "frontend/js/console/sshKey.js" %}"></script>
    <script src="{% static "frontend/js/lib/bootstrap-slider.js" %}"></script>
{% endblock %}
