{% set requirements = getSystemRequirements() %}
<div class="ui container stackable grid">
    <div class="ui one column">
        <div class="ui very padded segment raised">
            <h2 class="ui header">{{ title }}</h2>
            <div class="ui divider"></div>
            <div class="ui items">
                <div class="item">
                    <div class="middle aligned content">
                        <i class="large icon server middle aligned"></i>   
                        {{ component("system:install.requirements",{ requirements: requirements }) }}
                    </div>
                </div>
                <div class="item">
                {% if (requirements.errors is empty) %}               
                    <i class="large icon database middle aligned"></i>
                    <div class="middle aligned content">
                        <div class="header">{{ labels.database }}</div>
                        <div class="meta">
                            <span>{{ labels.connection }}</span>
                        </div>
                        <div class="description">  
                            {{ component("system:install.form") }}
                        </div>
                        <div class="mt-4 hidden" id="continue">
                            <a class="ui button olive large mt-1 hidden" id="continue_button">{{ buttons.continue }}</a>     
                        </div>                        
                    </div>                
                {% else %}
                    <div class="ui icon error message {{ hide }}" id="errors">            
                        <ul class="ui list">           
                        {% for error in requirements.errors %}
                            <li>{{ error }}</li>
                        {% endfor %}                
                        </ul>          
                    </div>   
                {% endif %}  
                </div>      
            </div>                                                  
        </div>
    </div>
</div>
<div id="core_label" class="hidden" label="{{ labels.install.core }}"></div>
<div id="extensions_label" class="hidden" label="{{ labels.install.extensions }}"></div>
<div id="post_label" class="hidden" label="{{ labels.install.post }}"></div>