{% extends "layout.html" %}

{% block extrahead %}
        <link rel="alternate" type="application/json" href="{{ url_for('json-resource', identifier=resource.identifier) }}"/>
        <link rel="alternate" type="text/csv" href="{{ url_for('csv-resource', identifier=resource.identifier) }}"/>
{% endblock %}

{% block body %}
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h1 class="page-header"><span id="resource_title_h1">{{ resource.title }}</span>    </h1>
        <h1 class="page-header">{% if g.user.is_authenticated() %}
        <a href="{{ url_for('test', lang=g.current_lang, resource_identifier=resource.identifier) }}"><button type="button" class="btn btn-primary btn-sm">{{ _('Test Now') }}</button></a>
        {% endif %}
        {% if g.user.role == 'admin' or g.user.username == resource.owner.username %}
        <a href="{{ url_for('edit_resource', lang=g.current_lang, resource_identifier=resource.identifier) }}"><button id="resource_edit" type="button" class="btn btn-primary btn-sm">{{ _('Edit') }}</button></a>
        <a href="{{ url_for('delete', lang=g.current_lang, resource_identifier=resource.identifier) }}"><button id="confirm-delete" type="button" class="btn btn-danger btn-sm">{{ _('Delete') }}</button></a>

        {% endif %}
        </h1>
    {% if resource.first_run %}
    <h3 class="page-header">{{ _('Monitoring Period') }}: {{ resource.first_run.checked_datetime.strftime('%Y-%m-%dT%H:%M:%SZ') }} - {{ resource.last_run.checked_datetime.strftime('%Y-%m-%dT%H:%M:%SZ') }}</h3>
    {% endif %}
    <div class="table-responsive col-md-4">
        <table class="table">
            <tr>
                <th>{{ _('Type') }}</th>
                <td>{{ resource_types[resource.resource_type]['label'] }}</td>
            </tr>
            <tr>
                <th>{{ _('Active') }}</th>
                <td>{{ resource.active }}</td>
            </tr>
            <tr>
                <th>{{ _('Owner') }}</th>
                <td>{{ resource.owner.username }}</td>
            </tr>
            <tr>
                <th>
                    {{ _('Name') }}
                </th>
                <td id="resource_title">{{ resource.title }}</td>
            </tr>
            <tr>
                <th>URL</th>
                <td><a href="{{ resource.get_capabilities_url }}">{{ resource.url }}</a></td>
            </tr>
            <tr>
                <th>Tags</th>
                <td>
                    <select id="resource_tags" multiple="multiple" style="width: 100%;">
                    {% for tag in resource.tags %}
                        <option value="{{ tag.name }}" selected="selected">{{ tag.name }}</option>
                    {% endfor %}
                    </select>
                </td>
            </tr>
            <tr>
                <th>Probes</th>

                <td>
                    {% for probe_var in resource.probe_vars %}
                    - {{ probe_var.name }}  <br/>
                    {% endfor %}
                </td>

            </tr>
            <tr>
                <th>{{ _('Response Times (seconds)') }}</th>
                <td>
                    <ul>
                        <li>{{ _('Min') }}: {{ resource.min_response_time|round(2) }}</li>
                        <li>{{ _('Average') }}: {{ resource.average_response_time|round(2) }}</li>
                        <li>{{ _('Max') }}: {{ resource.max_response_time|round(2) }}</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <th>{{ _('Reliability') }}</th>
                <td>
                    <button class="btn btn-{{ resource.reliability| cssize_reliability }} btn-sm nohover">{{ resource.reliability|round2 }}%</button>
                </td>
            </tr>
        </table>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-4">
            <div id="resource-map" class="resource-map"></div>
        </div>
        <div class="col-lg-4 col-md-4">
            <h4>Last Run Result</h4>
             {% if resource.last_run %}
                <ul>
                    <li>{{ _('Last Check') }} : {{ resource.last_run.checked_datetime.strftime('%Y-%m-%dT%H:%M:%SZ') }} </li>
                    <li>{{ _('Success') }}: {{ resource.last_run.success }} </li>
                    <li>{{ _('Message') }}: {{ resource.last_run.message }} </li>
                    <li>{{ _('Response Time') }}: {{ resource.last_run.response_time|round(2) }} </li>
                </ul>
            {% else %}
                <p>No runs yet.</p>
            {% endif %}
            <h4>Last Run Summary</h4>
            <a class="btn btn-default btn-xs" href="{{ url_for('json-resource', identifier=resource.identifier) }}"><span class="fa fa-download"></span> JSON</a> <a class="btn btn-default btn-xs" href="{{ url_for('csv-resource', identifier=resource.identifier) }}"><span class="fa fa-download"></span> CSV</a>
        </div>
    </div>
    <div class="clearfix"></div>
    <div id="run-chart" class="run-chart"></div>
    <div>
        <h2 class="sub-header">{{ _('History') }} <a class="btn btn-default btn-xs" href="{{ url_for('json-resource-history', identifier=resource.identifier) }}"><span class="fa fa-download"></span> JSON</a> <a class="btn btn-default btn-xs" href="{{ url_for('csv-resource-history', identifier=resource.identifier) }}"><span class="fa fa-download"></span> CSV</a>
</h2>
        <table id="resource-table" class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>{{ _('Date') }}</th>
                    <th>{{ _('Response Time (seconds)') }}</th>
                    <th>{{ _('Status') }}</th>
                </tr>
            </thead>
            <tbody>
            {% for run in resource.runs|sort(reverse=True, attribute='checked_datetime') %}
                <tr>
                    <td>{{ run.checked_datetime.strftime('%Y-%m-%dT%H:%M:%SZ') }}</td>
                    <td>{{ run.response_time|round(2) }}</td>
                    {% if run.success %}
                    <td><button type="button" class="btn btn-success btn-circle nohover"><i class="fa fa-check"></i></button></td>
                    {% else %}
                    <td><button title="{{ run.message }}" type="button" class="btn btn-danger btn-circle btn nohover"><i class="fa fa-times"></i></button></td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}
{% block extrafoot %}
<script type="text/javascript">

    {% if g.user.is_authenticated() %}
    $('#confirm-delete').click(function() {
        if (confirm('{{ _('Delete resource') }} "{{ resource.title }}"?') === false) {
            return false;
        }
    });

    $('#resource_edit').click(function() {
        // $('#flashed_message').append('<br/><strong>Getting metadata for Resource...</strong>');
        return true;
    });

    {% endif %}

    $('#resource-table').dataTable({
        'paging': true,
        'ordering': false,
        'searching': false,
        'lengthChange': false
    });

    var run_data = {{ resource.runs_to_json()|safe }};
    Morris.Area({
        element: 'run-chart',
        lineWidth: 1,
        data: run_data,
        xkey: 'datetime',
        ykeys: ['value'],
        labels: ['{{ _('Response Time') }}'],
        fillOpacity: 0.05,
        hideHover: true,
        resize: true,
        pointStrokeColors: ['black'],
        pointSize: 5,
        postUnits: ' {{ _('seconds') }}',
        dateFormat: function (x) { return new Date(x).toString(); },
        xLabelAngle: 45,
        xLabels: 'day',
        lineColors: function(row, series, ttype) {
            if (row !== null) {
                if (row.src.success === 1) {
                    return '#5CB85C';
                } else {
                    return '#D9534F';
                }
            }
            return '#00f';
        }
    });

    var map = L.map('resource-map').setView([{{ resource.latitude }}, {{ resource.longitude }}], 5);

    map.addLayer(new L.TileLayer(
        '{{ config['GHC_MAP']['url']}}', {
            maxZoom: {{ config['GHC_MAP']['maxzoom']}},
            subdomains: '{{ config['GHC_MAP']['subdomains']}}',
        }
    ));
    L.marker([{{ resource.latitude }}, {{ resource.longitude }}]).addTo(map)

    $('#resource_tags').select2({
        tags: true,
        disabled: true
    });
</script>
{% endblock %}