{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{% trans "Google Drive Backups - CyberPanel" %}{% endblock %}
{% block content %}

    {% load static %}


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

    <div class="container">
        <div id="page-title">
            <h2>{% trans "Set up Google Drive Backups" %} - <a target="_blank"
                                                               href="https://cyberpanel.net/docs/backup-to-google-drive/"
                                                               style="height: 23px;line-height: 21px;"
                                                               class="btn btn-border btn-alt border-red btn-link font-red"
                                                               title=""><span>{% trans "Remote Backups" %}</span></a>
            </h2>
            <p>{% trans "On this page you can set up and manage Google Drive Backups." %}</p>
        </div>

        <div ng-controller="googleDrive" class="panel">
            <div class="panel-body">
                <h3 class="title-hero">
                    {% trans "On this page you can set up and manage Google Drive Backups." %} <img
                        ng-hide="cyberPanelLoading" src="{% static 'images/loading.gif' %}"> <a
                        class="btn btn-border btn-alt border-blue-alt btn-link font-blue-alt"
                        href="#"
                        title="" data-toggle="modal"
                        data-target="#setupGdrive"><span>{% trans "Setup new Account" %}</span></a>
                    <div id="setupGdrive" 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">{% trans "Set up account" %}</h4>
                                </div>
                                <div class="modal-body">

                                    <form name="containerSettingsForm" action="/" class="form-horizontal">

                                        <div ng-hide="installationDetailsForm" class="form-group">
                                            <label class="col-sm-3 control-label">{% trans "Account Name" %}</label>
                                            <div class="col-sm-6">
                                                <input name="accountName" type="text" class="form-control"
                                                       ng-model="accountName">
                                            </div>
                                        </div>

                                    </form>

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary"
                                            ng-click="setupAccount()">Save <img
                                            ng-hide="cyberPanelLoading"
                                            src="{% static 'images/loading.gif' %}">
                                    </button>
                                    <button type="button" ng-disabled="savingSettings"
                                            class="btn btn-default" data-dismiss="modal">
                                        Close
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </h3>
                <div class="example-box-wrapper">


                    <form action="/" class="form-horizontal bordered-row">

                        <div class="form-group">
                            <label class="col-sm-3 control-label">{% trans "Select Drive Account" %}</label>
                            <div class="col-sm-6">
                                <select ng-change="fetchWebsites()" ng-model="selectedAccount" class="form-control">
                                    {% for items in accounts %}
                                        <option>{{ items }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <button ng-hide="driveHidden" type="button" ng-click="deleteAccount()"
                                    class="btn btn-danger">{% trans "Delete" %}</button>
                        </div>

                        <div ng-hide="driveHidden" class="form-group">
                            <label class="col-sm-3 control-label">{% trans "Select Backup Frequency" %}</label>
                            <div class="col-sm-6">
                                <select ng-change="changeFrequency()" ng-model="backupFrequency" class="form-control">
                                    <option>Never</option>
                                    <option>Daily</option>
                                    <option>Weekly</option>
                                </select>
                            </div>
                            Currently: {$ currently $}
                        </div>

                        <div ng-hide="driveHidden" class="form-group">
                            <label class="col-sm-3 control-label">{% trans "Add Sites for Backup" %}</label>
                            <div class="col-sm-6">
                                <select ng-model="selectedWebsite" class="form-control">
                                    {% for items in websites %}
                                        <option>{{ items }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <button type="button" ng-click="addSite()"
                                    class="btn btn-primary">{% trans "Add Site" %}</button>
                        </div>


                        <div ng-hide="driveHidden" id="checkret" class="form-group">
                            <label class="col-sm-3 control-label">{% trans "Backup File Retention" %} (<a href="https://cyberpanel.net/cyberpanel-addons">Paid Feature</a> )</label>
                            <div class="col-sm-6">
                                <select id="fileretention" ng-model="Retentiontime" ng-change="changeRetention()" class="form-control">
                                    <option value="1d">1 days</option>
                                    <option value="1w"> 1 week</option>
                                    <option value="1m"> 1 month</option>
                                    <option  value="6m"> 6 months</option>
                                </select>
                            </div>
                        </div>

                        <div ng-hide="driveHidden" class="form-group">
                            <div class="row">
                                <div style="margin-left: 2%" class="col-sm-3">
                                    <button data-toggle="modal" data-target="#backupLogs" ng-hide="driveHidden"
                                            type="button" ng-click="fetchLogs()"
                                            class="btn btn-gray">{% trans "View Logs" %}</button>
                                    <div id="backupLogs" class="modal fade" role="dialog">
                                        <div class="modal-dialog modal-lg">
                                            <!-- Modal content-->
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal">&times;
                                                    </button>
                                                    <h4 class="modal-title">{% trans "Git Logs" %} <img
                                                            ng-hide="cyberPanelLoading"
                                                            src="{% static 'images/loading.gif' %}">
                                                    </h4>
                                                </div>
                                                <div class="modal-body">

                                                    <div class="row">
                                                        <div class="col-sm-9">
                                                        </div>
                                                        <div class="col-sm-2">
                                                            <div class="form-group">
                                                                <select ng-model="recordsToShowLogs"
                                                                        ng-change="fetchLogs()"
                                                                        class="form-control" id="example-select">
                                                                    <option>10</option>
                                                                    <option>50</option>
                                                                    <option>100</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <table style="margin: 0px; padding-bottom: 2%" class="table">
                                                        <thead>
                                                        <tr>
                                                            <th>Type</th>
                                                            <th>Message</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr ng-repeat="log in logs track by $index">
                                                            <td ng-bind="log.type"></td>
                                                            <td ng-bind="log.message"></td>
                                                        </tr>
                                                        </tbody>
                                                    </table>

                                                    <div style="margin-top: 2%" class="row">
                                                        <div class="col-md-12">
                                                            <div class="row">
                                                                <div class="col-md-8">
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <div class="form-group">
                                                                        <select ng-model="currentPageLogs"
                                                                                class="form-control"
                                                                                ng-change="fetchLogs()">
                                                                            <option ng-repeat="page in paginationLogs">{$
                                                                                $index + 1
                                                                                $}
                                                                            </option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div> <!-- end row -->
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                </div>
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <select ng-model="recordsToShow"
                                                ng-change="fetchWebsites()"
                                                class="form-control" id="example-select">
                                            <option>10</option>
                                            <option>50</option>
                                            <option>100</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <table style="margin-top: 2%" class="table">
                                <thead>
                                <tr>
                                    <th>Sites</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="website in websites track by $index">
                                    <td ng-bind="website.name"></td>
                                    <td>
                                        <button type="button" ng-click="deleteSite(website.name)"
                                                class="btn btn-danger">{% trans "Delete" %}</button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                            <div style="margin-top: 2%" class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-8">
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <select ng-model="currentPage" class="form-control"
                                                        ng-change="fetchWebsites()">
                                                    <option ng-repeat="page in pagination">{$ $index + 1
                                                        $}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                    </div> <!-- end row -->
                                </div>
                            </div>
                        </div>

                    </form>


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


    </div>


{% endblock %}