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

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

<div ng-controller="manageCronController" class="container">
<div id="page-title">
   <h2 style="display: inline;">{% trans "Cron Management" %} - <a  target="_blank" href="http://go.cyberpanel.net/cron-jobs" style="height: 23px;line-height: 21px;" class="btn btn-border btn-alt border-red btn-link font-red" title=""><span>{% trans "Cron Docs" %}</span></a></h2>
   <p>{% trans "Create, edit or delete your cron jobs from this page." %}</p>
</div>

<div class="panel">
    <div class="panel-body">
        <h3 class="title-hero">
            {% trans "Cron Management" %} <img id="manageCronLoading" src="{% static 'images/loading.gif' %}">
        </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 Website" %} </label>
                    <div class="col-sm-6">
                        <select ng-change="fetchWebsites()" ng-model="websiteToBeModified" class="form-control">
                            {% for items in websiteList %}
                                <option>{{ items }}</option>
                            {% endfor %}
                        </select>
                    </div>
                   <button type="button" class="btn btn-primary" ng-click="fetchWebsites()" href=""><i class="glyph-icon icon-refresh" title="{% trans "Refresh" %}"></i></button>
                   <button type="button" class="btn btn-primary" ng-click="addCronForm()" href=""><i class="glyph-icon icon-plus" title="{% trans "Add Cron" %}"></i></button>
                </div>


            <!------ Modification form that appears after a click --------------->

            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="cronTable">
                <thead>
                <tr>
                    <th>{% trans "Minute" %}</th>
                    <th>{% trans "Hour" %}</th>
                    <th>{% trans "Day of Month" %}</th>
                    <th>{% trans "Month" %}</th>
                    <th>{% trans "Day of Week" %}</th>
                    <th>{% trans "Command" %}</th>
                    <th>{% trans "Action" %}</th>
                </tr>
                </thead>
                <tbody>

                <tr ng-repeat="cron in cronList track by $index">
                    <td ng-bind="cron.minute"></td>
                    <td ng-bind="cron.hour"></td>
                    <td ng-bind="cron.monthday"></td>
                    <td ng-bind="cron.month"></td>
                    <td ng-bind="cron.weekday"></td>
                    <td ng-bind="cron.command"></td>
                    <td>
                        <a class="btn btn-warning" ng-click="removeCron(cron.line)" href=""><i class="glyph-icon icon-trash" title="{% trans "Delete" %}"></i></a>
                        <a class="btn btn-primary" ng-click="fetchCron(cron.line)" href=""><i class="glyph-icon icon-pencil" title="{% trans "Edit" %}"></i></a>
                    </td>
                </tr>

                </tbody>
                </table>

            <!------ Modification form that appears after a click --------------->
            <div id="modifyCronForm">
            <form  action="/" class="form-horizontal bordered-row ng-scope ng-dirty ng-valid-parse ng-valid ng-valid-required">
                <input type="hidden" ng-value="line" required="">
                <hr>
                <div class="form-group">
                    <label class="col-sm-3 control-label">{% trans "Pre defined" %}</label>
                    <div class="col-sm-6">
                       <select class="form-control" ng-model="defined" ng-change="populate()" required="">
                         <option value="* * * * *">{% trans "Every minute" %}</option>
                         <option value="*/5 * * * *">{% trans "Every 5 minutes" %}</option>
                         <option value="*/30 * * * *">{% trans "Every 30 minutes" %}</option>
                         <option value="0 * * * *">{% trans "Every hour" %}</option>
                         <option value="0 0 * * *">{% trans "Every day" %}</option>
                         <option value="0 0 * * 0">{% trans "Every week" %}</option>
                         <option value="0 0 1 * *">{% trans "Every month" %}</option>
                         <option value="0 0 1 1 *">{% trans "Every year" %}</option>
                      </select>
                    </div>
                </div>
                <hr>
                <div class="form-group">
                    <label class="col-sm-3 control-label">{% trans "Minute" %}</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control ng-pristine ng-untouched ng-not-empty ng-valid ng-valid-required" ng-model="minute" required="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">{% trans "Hour" %}</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control ng-pristine ng-untouched ng-not-empty ng-valid ng-valid-required" ng-model="hour" required="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">{% trans "Day of month" %}</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control ng-pristine ng-untouched ng-not-empty ng-valid ng-valid-required" ng-model="monthday" required="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">{% trans "Month" %}</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control ng-pristine ng-untouched ng-not-empty ng-valid ng-valid-required" ng-model="month" required="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">{% trans "Day of week" %}</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control ng-pristine ng-untouched ng-not-empty ng-valid ng-valid-required" ng-model="weekday" required="">
                    </div>
                </div>
                <hr>
                <div class="form-group">
                    <label class="col-sm-3 control-label">{% trans "Command" %}</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control ng-pristine ng-untouched ng-not-empty ng-valid ng-valid-required" ng-model="command" required="">
                    </div>
                </div>
            </form>
            <div id="saveCronButton" class="form-group">
                <label class="col-sm-3 control-label"></label>
                <div class="col-sm-4">
                    <button type="button" ng-click="modifyCronFunc()" class="btn btn-primary btn-lg btn-block">{% trans "Save edits" %}</button>

                </div>
            </div>
            <div id="addCronButton" class="form-group">
                <label class="col-sm-3 control-label"></label>
                <div class="col-sm-4">
                    <button type="button" ng-click="addCronFunc()" class="btn btn-primary btn-lg btn-block">{% trans "Add cron" %}</button>
                </div>
            </div>
            </div>

            <div class="form-group">
                    <label class="col-sm-3 control-label"></label>
              {{ messger }}
                    <div class="col-sm-4">
                            <div id="fetchCronFailure" class="alert alert-danger">
                                        <p>{% trans "Cannot fetch website details. Error message:" %} {$ errorMessage $}</p>
                            </div>

                            <div id="addCronFailure" class="alert alert-danger">
                                        <p>{% trans "Unable to add/save Cron. Error message:" %} {$ errorMessage $}</p>
                            </div>
                            <div id="cronEditSuccess" class="alert alert-success">
                                        <p>{% trans "Cron job saved" %}</p>
                            </div>
                    </div>

            </div>


            </form>




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


</div>


{% endblock %}