{% extends "base.html.twig" %}

{% block title %}
    {{ 'about.title'|trans }}
{% endblock %}

{% block body %}
    <div class="jumbotron">
        <h1>{{ 'about.version.title'|trans({'%version%': version}) }}</h1>
        <p>{{ 'about.version.subtitle'|trans }}</p>
        <p>
            <button id="btn-checkversion" class="btn btn-secondary btn-lg" role="button">
                <i class="fa fa-refresh"></i>
                {{ 'about.version.check_new'|trans }}
            </button>
            <a id="btn-downloader" href="#" class="btn btn-success btn-lg" role="button" target="_blank" style="display:none">
                <i class="fa fa-download"></i>
                {{ 'about.version.download'|trans }} <span class="version"></span>
            </a>
            <span id="update-alert" class="label label-success" style="display:none">
                <i class="fa fa-check"></i>
                {{ 'about.version.newest'|trans }}
            </span>
        </p>
    </div>
    <h2>{{ 'about.community.title'|trans }}</h2>
    <p>{{ 'about.community.subtitle'|trans }}</p>
    <div class="row">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    {{ 'about.community.blog.title'|trans }}
                </div>
                <div class="card-body">
                    <p>{{ 'about.community.blog.description'|trans }}</p>
                    <p>
                        <a href="https://medium.com/novosga" class="btn btn-primary" target="_blank">
                            <i class="fa fa-eye"></i>&nbsp;
                            {{ 'about.community.blog.button'|trans }}
                        </a>
                    </p>
                </div>
           </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    {{ 'about.community.forum.title'|trans }}
                </div>
                <div class="card-body">
                    <p>{{ 'about.community.forum.description'|trans }}</p>
                    <p>
                        <a href="https://discuss.novosga.org" class="btn btn-primary" target="_blank">
                            <i class="fa fa-eye"></i>&nbsp;
                            {{ 'about.community.forum.button'|trans }}
                        </a>
                    </p>
                </div>
           </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    {{ 'about.community.github.title'|trans }}
                </div>
                <div class="card-body">
                    <p>{{ 'about.community.github.description'|trans }}</p>
                    <p>
                        <a href="https://github.com/novosga" class="btn btn-primary" target="_blank">
                            <i class="fa fa-eye"></i>&nbsp;
                            {{ 'about.community.github.button'|trans }}
                        </a>
                    </p>
                </div>
           </div>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        body>section {
            padding: 20px 0;
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        (function () {
            'use strict'
            
            $('#btn-checkversion').on('click', function () {
                var $elem = $(this);
                var icon = $elem.prop('disabled', true).find('span');
                icon.addClass('fa-spin');
                $.ajax({
                    url: 'https://api.github.com/repos/novosga/novosga/tags',
                    success: function(response) {
                        $('#btn-checkversion').hide();
                        var latest = response[0];
                        if (App.version !== latest.name.replace('v', '')) {
                            $('#btn-downloader')
                                .show()
                                .prop('href', 'https://github.com/novosga/novosga/releases/' + latest.name)
                                .find('.version')
                                .text(latest.name);
                        } else {
                            $('#update-alert').show();
                        }
                    },
                    complete: function () {
                        icon.removeClass('fa-spin');
                    }
                });
                return false;
            });
        })();
    </script>
{% endblock %}