{% extends "layouts/default.html.twig" %}

{% block title %}{{ 'Backup job report'|trans }}{% endblock %}

{% block body %}
<div class="container-fluid">

    {{ include('partials/_page_header.html.twig', {header: 'Backup job report'|trans, description: 'Report per Bacula backup job name'|trans }) }}

    <div class="row">
        <div class="card border-dark mb-3">
            <div class="card-header">{{ 'Report options'|trans }}</div>
            <div class="card-body">
                <form method="post" action="{{ url_for('backupjob') }}" class="form-inline">
                    <!-- Backup job name -->
                    <div class="form-group">
                        <label for="backupjobname">{{ 'Backup job name'|trans }}</label>

                        <select class="form-control input-sm {{ validation_errors.backupjob_name ? 'is-invalid' : ' ' }}" name="backupjob_name">
                            {% for job in jobs_list %}
                                <option value="{{ job }}"
                                        {% if job == selected_jobname %}selected{% endif %}>
                                    {{ job }}</option>
                            {% endfor %}
                        </select>
                        <div class="invalid-feedback">
                            {{ validation_errors.backupjob_name|first }}
                        </div>
                    </div>
                    <!-- Period -->
                    <select class="form-control input-sm {{ validation_errors.period ? 'is-invalid' : ' ' }}" name="period">
                        {% for period,label in periods_list %}
                            <option value="{{ period }}"
                                    {% if period == selected_period %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                    <div class="invalid-feedback">
                        {{ validation_errors.period|first }}
                    </div>

                    <!-- Submit button -->
                    <div class="form-group pull-right">
                        <button type="submit" class="btn btn-primary">{{ 'View report'|trans }}</button>
                    </div>

                    {{ csrf|raw }}
                </form>
            </div>
        </div>

        {% if no_report_options == 'false' %}
        <div class="card border-dark mb-3">
            <div class="card-header">{{ 'Job informations'|trans }}</div>
            <div class="card-body">
                <h6 class="card-title">{{ 'Job name'|trans }}</h6>
                <p class="card-text">{{ backupjob_name }}</p>
                <h6 class="card-title">{{ 'Period'|trans }}</h6>
                <p class="card-text">{{ perioddesc }}</p>
                <h6 class="card-title">{{ 'Transfered Bytes'|trans }}</h6>
                <p class="card-text">{{ backupjobbytes }}</p>
                <h6 class="card-title">{{ 'Transfered Files'|trans }}</h6>
                <p class="card-text">{{ backupjobfiles }}</p>
            </div>
        </div>

        <!-- Last jobs list -->
        <h4>{{ 'Last backup jobs'|trans }}</h4>

        <div class="table-responsive">
            <table class="table table-condensed table-hover table-striped table-bordered text-center">
                <caption>{{ 'Last backup jobs'|trans }}</caption>
                <thead>
                <tr>
                    <th class="text-center">{{ 'Job Id'|trans }}</th>
                    <th class="text-center">{{ 'Status'|trans }}</th>
                    <th class="text-center">{{ 'Level'|trans }}</th>
                    <th class="text-right">{{ 'Files'|trans }}</th>
                    <th class="text-right">{{ 'Bytes'|trans }}</th>
                    <th class="text-center">{{ 'Start time'|trans }}</th>
                    <th class="text-center">{{ 'End time'|trans }}</th>
                    <th class="text-center">{{ 'Elapsed time'|trans }}</th>
                    <th class="text-rightr">{{ 'Speed'|trans }}</th>
                    <th class="text-center">{{ 'Compression'|trans }}</th>
                </tr>
                </thead>
                {% for job in jobs %}
                    <tr>
                        <td>{{ job.jobid }}</td>
                        <td>{{ job.jobstatuslong }}</td>
                        <td>{{ job.joblevel }}</td>
                        <td class="text-right">
                            {% if job.jobfiles > 0 %}
                                <a href="{{ base_path() }}/jobfiles/{{ job.jobid }}">{{ job.jobfiles }}</a>
                            {% else %}
                                {{ job.jobfiles }}
                            {% endif %}
                        </td>
                        <td class="text-right">{{ job.jobbytes }}</td>
                        <td>{{ job.starttime }}</td>
                        <td>{{ job.endtime }}</td>
                        <td>{{ job.elapsedtime }}</td>
                        <td class="text-right">{{ job.speed }}</td>
                        <td>{{ job.compression }}</td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="9">{{ 'No job(s) to display'|trans }}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>

    <!-- Transferred Bytes/Files graph -->
    {% if selected_period <= 14 %}
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <div class="card">
                <div class="card-header"><b>{{ 'Transfered Bytes'|trans }}</b></div>
                <div class="card-body">
                    <div id="{{ stored_bytes_chart_id }}">
                        <svg></svg>
                    </div>
                    {{ stored_bytes_chart|raw }}
                </div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-6">
            <div class="card">
                <div class="card-header"><b>{{ 'Transfered Files'|trans }}</b></div>
                <div class="card-body">
                    <div id="{{ stored_files_chart_id }}">
                        <svg></svg>
                    </div>
                    {{ stored_files_chart|raw }}
                </div>
            </div>
        </div>
        {% else %}
        <div class="row">
            <div class="col-xs-12">
                <div class="card">
                    <div class="card-header"><b>{{ 'Transfered Bytes'|trans }}</b></div>
                    <div class="card-body">
                        <div id="{{ stored_bytes_chart_id }}">
                            <svg></svg>
                        </div>
                        {{ stored_bytes_chart|raw }}
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <div class="card">
                    <div class="card-header"><b>{{ 'Transfered Files'|trans }}</b></div>
                    <div class="card-body">
                        <div id="{{ stored_files_chart_id }}">
                            <svg></svg>
                        </div>
                        {{ stored_files_chart|raw }}
                    </div>
                </div>
            </div>
            {% endif %}
            {% else %}
                <div class="alert alert-info"
                     role="alert">{{ 'Choose the backup job name and the period interval, then click on the'|trans }}
                    <strong>{{ 'View report'|trans }}</strong> button
                </div>
            {% endif %}
        </div>
    </div>

    {% endblock %}