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

{% block title %}{{ pluginName }} Settings{% endblock %}
{% block selected_page %}plugins{% endblock %}
{% block selected_sub_page %}plugin_manage{% endblock %}

{% block body %}
    <div class="row clearfix right_col" role="main">
        <div class="col_12">
            <div class="widget clearfix">
                <h2>{{ pluginName }} Settings</h2>
                <div class="widget_inside">
                    {{ msg_page_notifications|raw }}
                    <form method="POST" action="{{ ADMIN_WEB_ROOT }}/plugin/uploadwidget/settings" name="pluginForm" id="pluginForm" autocomplete="off" enctype="multipart/form-data">
                        <div class="clearfix col_12">
                            <div class="col_4">
                                <h3>Plugin State</h3>
                                <p>Whether this plugin is enabled.</p>
                            </div>
                            <div class="col_8 last">
                                <div class="form">
                                    <div class="clearfix alt-highlight">
                                        <label>Plugin Enabled:</label>
                                        <div class="input">
                                            <select name="plugin_enabled" id="plugin_enabled" class="medium validate[required]">
                                                {% for k,yesNoOption in yesNoOptions %}
                                                    <option value="{{ k }}"{% if plugin_enabled == k %} SELECTED{% endif %}>{{ yesNoOption }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="clearfix col_12">
                            <div class="col_4">
                                <h3>Upload Account &amp; Folder</h3>
                                <p>Which account and folder to store all uploads within. Leaving this as 'logged in user' will assign it to the user who is uploading the file, or a non-account upload if they are not logged in.</p>
                            </div>
                            <div class="col_8 last">
                                <div class="form">
                                    <div class="clearfix alt-highlight">
                                        <label>Account:</label>
                                        <div class="input">
                                            <select name="upload_user" id="upload_user" class="xxlarge validate[required]" onChange="loadFolderList();
                                                    return false;">
                                                <option value="0">- logged in user -</option>
                                                {% for k,userOption in userOptions %}
                                                    <option value="{{ userOption['id'] }}"{% if upload_user == userOption['id'] %} SELECTED{% endif %}>{{ userOption['username'] }}</option>
                                                {% endfor %}
                                            </select>
                                            <p class="text-muted">
                                                Note: Only paid, moderator and admin users are shown above.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="clearfix select-folder-wrapper">
                                        <label>Folder:</label>
                                        <div class="input">
                                            <select name="upload_folder" id="upload_folder" class="xxlarge validate[required]">
                                                <option value="0">- root folder -</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="clearfix col_12">
                            <h3>Upload Widgets</h3>
                            <p>Try out any of the widget below by using the examples. Copy &amp; paste any of the HTML code into your own site to embed the uploader. There are 3 default variations of the uploader widget, you can amend the styles of these by editing the css file listed. Site upload settings still apply to widget uploaders.</p>
                        </div>

                        <div class="clearfix col_12">
                            <div class="col_4">
                                <h3>Large Icon Uploader</h3>
                                <p>Matches the main site styling. Larger format, includes progress uploader, multiple file upload, chunked uploading and custom buttons.</p>
                            </div>
                            <div class="col_8 last">
                                <div class="form">
                                    <div class="clearfix alt-highlight">
                                        <div style="margin: 8px;">
                                            <p>Widget Example:</p><br/>
                                            {{ largeUploaderIframeHtml|raw }}

                                            <p style="margin-top: 16px;">Widget HTML Code:</p>
                                            <pre><code>{{ largeUploaderIframeHtml }}</code></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
     
                        <div class="clearfix col_12">
                            <div class="col_4">
                                <h3>Medium Icon Uploader</h3>
                                <p>Same as the large uploader above however with smaller icons.</p>
                            </div>
                            <div class="col_8 last">
                                <div class="form">
                                    <div class="clearfix alt-highlight">
                                        <div style="margin: 8px;">
                                            <p>Widget Example:</p><br/>
                                            {{ largeNHUploaderIframeHtml|raw }}

                                            <p style="margin-top: 16px;">Widget HTML Code:</p>
                                            <pre><code>{{ largeNHUploaderIframeHtml }}</code></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="clearfix col_12">
                            <div class="col_4">
                                <h3>Minimal Uploader</h3>
                                <p>Less formatting, button uploaders, multiple file upload, chunked uploading, useful as a good starting point for customising or when space is limited.</p>
                            </div>
                            <div class="col_8 last">
                                <div class="form">
                                    <div class="clearfix alt-highlight">
                                        <div style="margin: 8px;">
                                            <p>Widget Example:</p><br/>
                                            {{ minimalUploaderIframeHtml|raw }}

                                            <p style="margin-top: 16px;">Widget HTML Code:</p>
                                            <pre><code>{{ minimalUploaderIframeHtml }}</code></pre>
                                        </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 name="submitted" type="hidden" value="1"/>
                                        <input type="submit" value="Submit" class="button blue">
                                        <input type="reset" value="Cancel" class="button grey" onClick="window.location = '{{ ADMIN_WEB_ROOT }}/plugin_manage';">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>   
        </div>
    </div>
{% endblock %}

{% block head_js %}
<script>
var selectedFolder = '{{ upload_folder }}';
function loadFolderList()
{
    $("#upload_folder").html('<option value="0">loading folders...</option>');
    if($('#upload_user').val() > 0) {
        $('.select-folder-wrapper').show();

        // get data
        $.ajax({
            type: "POST",
            url: "{{ ADMIN_WEB_ROOT }}/ajax/sharing_manage_add_get_folder_listing",
            data: {
                created_by_user_id: $('#upload_user').val()
            },
            dataType: 'json',
            success: function (json) {
                $('#upload_folder').html(json.html);
                $('#upload_folder option[value="'+selectedFolder+'"]').prop('selected', true);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                showError(XMLHttpRequest.responseText, 'popupMessageContainer');
            }
        });
    }
    else {
        $('.select-folder-wrapper').hide();
    }
}
$(function() {
	loadFolderList();
});
</script>
{% endblock %}