{% extends "@core/admin/partial/layout_logged_in.html.twig" %}

{% block title %}Theme Settings{% endblock %}
{% block selected_page %}themes{% endblock %}
{% block selected_sub_page %}theme_manage{% endblock %}

{% block body %}
<div class="row clearfix">
    <div class="col_12">
        <div class="widget clearfix">
            <h2>Settings</h2>
            <div class="widget_inside">
                
                {{ msg_page_notifications|raw }}
                
                <form method="POST" action="{{ ADMIN_WEB_ROOT }}/theme_settings/evolution" name="pluginForm" id="pluginForm" autocomplete="off" enctype="multipart/form-data">

                    <div class="clearfix col_12">
                        <div class="col_4">
                            <h3>General Site Settings</h3>
                            <p>Site logo, skin and any other settings.</p>
                        </div>
                        <div class="col_8 last">
                            <div class="form">
                                <div class="clearfix alt-highlight">
                                    <label>Main Site Logo:</label>
                                    <div class="input">
                                        <input type="file" name="site_logo"/>
                                        Shown on the login screen &amp; file manager, generally on a dark background. Leave blank to keep existing. Must be a transparent png. Download the <a href="../images/logo/logo.png" target="_blank" download>original png here</a>.
                                        <br/>
                                        <br/>
                                        <img src="{{ mainLogoUrl }}?r={{ random(999999) }}"/>
                                    </div>
                                </div>

                                <div class="clearfix">
                                    <label>Public Shared Logo:</label>
                                    <div class="input">
                                        <input type="file" name="site_logo_inverted"/>
                                        Shown on the share folder pages, on a white background. Leave blank to keep existing. Must be a transparent png. Download the <a href="../images/logo/logo-whitebg.png" target="_blank" download>original png here</a>.
                                        <br/>
                                        <br/>
                                        <div class="image-hover">
                                            <img src="{{ inverseLogoUrl }}?r={{ random(999999) }}"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="clearfix alt-highlight">
                                    <label>Site Skin:</label>
                                    <div class="input">
                                        <select name="site_skin" id="site_skin" class="medium">
                                            {% for skin in skinsArr %}
                                                <option{{ site_skin==skin?' SELECTED':'' }}>{{ skin }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="clearfix">
                                    <label>Custom CSS Code:</label>
                                    <div class="input">
                                        <textarea name="css_code" class="xxlarge" placeholder="css code..." style="font-family: monospace; height: 200px;">{{ css_code }}</textarea>
                                        Optional. Use this field to override any of the site CSS without having to create a new theme. By right clicking on an element in your browser and selecting 'inspect', you can find the relating CSS rules. These changes will be kept after any script upgrades.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix col_12">
                        <div class="col_4 adminResponsiveHide">&nbsp;</div>
                        <div class="col_8 last">
                            <div class="clearfix">
                                <div class="input no-label">
                                    <input type="submit" value="Submit" class="button blue">
                                    <input type="reset" value="Cancel" class="button" onClick="window.location = '{{ ADMIN_WEB_ROOT }}/theme_manage';"/>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input name="submitted" type="hidden" value="1"/>
                </form>
            </div>
        </div>   
    </div>
</div>
{% endblock %}