{% extends "layout.html" %} {% block css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/dataTables.min.css') }}" crossorigin="anonymous" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/tabler_datatable.css') }}" crossorigin="anonymous" />
<link rel="stylesheet" href="{{ url_for('static', filename='libs/selectize/dist/css/selectize.css') }}"
    crossorigin="anonymous" />
<style>
    #logs {
        height: 900px;
        width: 100%;
        overflow: scroll;
        padding: 15px;
        border: 1px solid #e9e9e9;
    }

</style>
{% endblock %} {% block title %} Backup Page {% endblock %} {% block body %}
<!-- Page title -->
<div class="page-header">
    <div class="row align-items-center">
        <div class="col-auto">
            <div class="page-pretitle">
                Backup job list
            </div>
            <h2 class="page-title">
                Backup Page
            </h2>
        </div>
    </div>
    <div class="float-right">
        <a href="#" class="btn btn-outline-dark active float-right" data-toggle="modal" data-target="#modal-create">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24"
                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z"></path>
                <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
                <circle cx="12" cy="14" r="2"></circle>
                <polyline points="14 4 14 8 8 8 8 4"></polyline>
            </svg>
            Create Backup
        </a>
    </div>
</div>
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Backups</h3>
    </div>
    <div class="table-responsive">
        <table id="data-backup" class="table card-table table-vcenter text-nowrap datatable">
            <thead>
                <tr>
                    <th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
                    <th>name</th>
                    <th>status</th>
                    <th>errors</th>
                    <th>warnings</th>
                    <th>created</th>
                    <th>expires</th>
                    <th>storage</th>
                    <th>location</th>
                    <th>selector</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for backup in backups %}
                <tr>
                    <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="select backup">
                    </td>
                    <td><span class="text-muted"><strong>{{ backup.name }}</strong></strong></span></td>
                    <td><span class="text-muted">{{ backup.phase }}</span></td>
                    <td><span class="text-muted">{{ backup.errors or 0 }}</span></td>
                    <td><span class="text-muted">{{ backup.warnings or 0 }}</span></td>
                    <td><span class="text-muted">{{ backup.creationTimestamp }}</span></td>
                    <td><span class="text-muted">{{ backup.expiration }}</span></td>
                    <td><span class="text-muted">{{ backup.storageLocation }}</span></td>
                    <td><span class="text-muted">{{ backup.location or "-" }}</span></td>
                    <td><span class="text-muted">{{ backup.selector or "-" }}</span></td>
                    <td class="text-right">
                        <span class="dropdown ml-1">
                            <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top"
                                data-boundary="viewport" data-toggle="dropdown">Actions</button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#" onclick="modal_describe('{{ backup.name }}');">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24"
                                        height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                        fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z"></path>
                                        <path
                                            d="M9 5H7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V7a2 2 0 0 0 -2 -2h-2">
                                        </path>
                                        <rect x="9" y="3" width="6" height="4" rx="2"></rect>
                                    </svg>
                                    Describe
                                </a>
                                <a class="dropdown-item" href="#" onclick="modal_logs('{{ backup.name }}');">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24"
                                        height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                        fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z"></path>
                                        <polyline points="14 3 14 8 19 8"></polyline>
                                        <path
                                            d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z">
                                        </path>
                                        <line x1="9" y1="9" x2="10" y2="9"></line>
                                        <line x1="9" y1="13" x2="15" y2="13"></line>
                                        <line x1="9" y1="17" x2="15" y2="17"></line>
                                    </svg>
                                    Logs
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item text-danger" href="#" data-href="{{ backup.name }}"
                                    data-toggle="modal" data-target="#confirm-delete">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24"
                                        height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                        fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z"></path>
                                        <line x1="4" y1="7" x2="20" y2="7"></line>
                                        <line x1="10" y1="11" x2="10" y2="17"></line>
                                        <line x1="14" y1="11" x2="14" y2="17"></line>
                                        <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
                                        <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                                    </svg>
                                    Delete
                                </a>
                            </div>
                        </span>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% include "backup/modal_confirm.html" %}
{% include "backup/modal_describe.html" %}
{% include "backup/modal_logs.html" %}
{% include "backup/modal_create.html" %}
{% endblock %} {% block javascript %}
<script src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ url_for('static', filename='libs/selectize/dist/js/standalone/selectize.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/views/backup.js') }}"></script>
{% endblock %}
