{% extends '@ZikulaCoreInstaller/theme.html.twig' %}
{% block childstylesheets %}
    <link href="{{ asset('bundles/zikulacoreinstaller/css/ajaxinstaller.css') }}" rel="stylesheet" />
{% endblock %}
{% block childjavascripts %}
    <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
    <script src="{{ path('fos_js_routing_js', {'callback': 'fos.Router.setData'}) }}"></script>
    <script src="{{ asset('bundles/zikulacoreinstaller/js/ajaxcommon.js') }}"></script>
{% endblock %}

{% block title 'Zikula is installing!'|trans %}

{% block content %}
<div>
    <div class="progress">
        <div id="progress-bar" class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0">
            <span class="sr-only">{% trans %}Progress bar{% endtrans %}</span>
        </div>
    </div>

    <div class="text-center">
        <a href="#installCard" id="beginInstall" class="btn btn-lg btn-success">{% trans %}Begin Installer{% endtrans %}</a>
    </div>

    <div class="card" id="installCard">
        <div class="card-header">
            <strong>{% trans %}Installing Extensions and Helpers{% endtrans %}</strong>
        </div>
        <div class="card-body">
            <ul id="ajaxList" class="fa-ul text-left">
                {% for stage in stages %}
                <li id="{{ stage.name }}" class="text-muted col-md-5 offset-md-1 float-left">
                    <span class="fa-li"><i class="fas fa-circle"></i></span>
                    <span class="pre">{{ stage.pre }}</span>
                    <span class="during d-none">{{ stage.during }}</span>
                    <span class="success d-none">{{ stage.success }}</span>
                    <span class="fail d-none">{{ stage.fail }}</span>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="text-center pt-3">
        <a id="continueButton" href="{{ url('install', {'stage': 'complete'}) }}" class="btn btn-lg btn-success d-none">{% trans %}Finish{% endtrans %} <i class="fas fa-angle-double-right"></i></a>
    </div>
</div>
<div id="stageDefinitions" data-stages='[{% for stage in stages %}"{{ stage.name }}"{% if not loop.last %},{% endif %}{% endfor %}]'></div>
{% endblock %}