<!DOCTYPE html>
<html id="ng-app">
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex,nofollow">
    <meta name="google" content="notranslate">
    <title>Matomo {{ piwikVersion }} &rsaquo; {{ 'Installation_Installation'|translate }}</title>

    <script>window.piwik = {installation: true};</script>
    <link rel="stylesheet" type="text/css" href="index.php?module=Installation&action=getInstallationCss"/>
    <script>
        {{ javascriptTranslations|raw }}
    </script>
    <script type="text/javascript" src="index.php?module=Installation&action=getInstallationJs"></script>
    <link rel="shortcut icon" href="plugins/CoreHome/images/favicon.png"/>
</head>
<body id="installation">
<div class="container">

    <div class="header">
        <div class="logo">
            <img title="Matomo {{ piwikVersion }} - {{ 'General_OpenSourceWebAnalytics'|translate|escape('html_attr') }}" src="plugins/Morpheus/images/logo.png"/>
            <p>{{ 'General_OpenSourceWebAnalytics'|translate }}</p>
        </div>
        <div class="language-selector">
            {{ postEvent('Template.topBar')|raw }}
        </div>

        <div class="installation-progress">
            <h4>
                {{ 'Installation_InstallationStatus'|translate }}
                <small>{{ percentDone }}%</small>
            </h4>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentDone }}%;"></div>
            </div>
        </div>

        <div class="clearfix"></div>
    </div>

    <div class="row">
        <div class="col s3">
            <ul class="list-group">
                {% for stepId,stepName in allStepsTitle %}
                    {% if currentStepId > stepId %}
                        {% set stepClass = 'disabled' %}
                    {% elseif currentStepId == stepId %}
                        {% set stepClass = 'active' %}
                    {% else %}
                        {% set stepClass = '' %}
                    {% endif %}
                    <li class="list-group-item {{ stepClass }}">{{ stepId + 1 }}. {{ stepName|translate }}</li>
                {% endfor %}
            </ul>
        </div>
        <div class="col s9 content">
            {% set nextButton %}
                <p class="next-step">
                    <a class="btn" href="{{ linkTo({'action':nextModuleName, 'token_auth':null, 'method':null }) }}">
                        {{ 'General_Next'|translate }} &raquo;</a>
                </p>
            {% endset %}
            {% if showNextStepAtTop is defined and showNextStepAtTop %}
                {{ nextButton }}
            {% endif %}

            {% block content %}{% endblock %}

            {% if showNextStep %}
                {{ nextButton }}
            {% endif %}
        </div>
    </div>

</div>

<div id="should-get-hidden"
     style="color: red;margin-left: 16px;margin-bottom: 16px;font-weight:bold;font-size: 20px">
    <p class="should-get-hidden-by-js">
        {{ 'CoreHome_JsDidntLoad'|translate }}
    </p>
    <p class="should-get-hidden-by-css">
        {{ 'CoreHome_CssDidntLoad'|translate }}
    </p>
</div>
{% include "@CoreHome/_adblockDetect.twig" %}
</body>
</html>
