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

{% block title %}{{ ta('plugin_name_settings', '[[[PLUGIN_NAME]]] Settings', {'PLUGIN_NAME': pluginName}) }}{% 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="clearfix">
                <h2>{{ ta('plugin_name_settings', '[[[PLUGIN_NAME]]] Settings', {'PLUGIN_NAME': pluginName}) }}</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>{{ ta('plugin_state', 'Plugin State') }}</h3>
                                <p>{{ ta('whether_this_plugin_is_enabled', 'Whether this plugin is enabled.') }}</p>
                            </div>
                            <div class="col_8 last">
                                <div class="form">
                                    <div class="clearfix alt-highlight">
                                        <label>{{ ta('plugin_enabled', '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>{{ ta('upload_account_amp_folder', 'Upload Account & Folder') }}</h3>
                                <p>{{ ta('which_account_and_folder_to_store_all_uploads_within_leaving_this_as_logged_in_user_will_assign_it_to_the_user_who_is_uploading', '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>{{ ta('account', 'Account') }}:</label>
                                        <div class="input">
                                            <select name="upload_user" id="upload_user" class="xxlarge validate[required]" onChange="loadFolderList();
                                                    return false;">
                                                <option value="0">- {{ ta('logged_in_user', '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">
                                                {{ ta('note_only_paid_moderator_and_admin_users_are_shown_above', 'Note: Only paid, moderator and admin users are shown above.') }}
                                            </p>
                                        </div>
                                    </div>
                                    <div class="clearfix select-folder-wrapper">
                                        <label>{{ ta('folder', 'Folder') }}:</label>
                                        <div class="input">
                                            <select name="upload_folder" id="upload_folder" class="xxlarge validate[required]">
                                                <option value="0">- {{ ta('root_folder_lower', 'root folder') }} -</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="clearfix col_12">
                            <h3>{{ ta('upload_widgets', 'Upload Widgets') }}</h3>
                            <p>{{ ta('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', '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>{{ ta('large_icon_uploader', 'Large Icon Uploader') }}</h3>
                                <p>{{ ta('matches_the_main_site_styling_larger_format_includes_progress_uploader_multiple_file_upload_chunked_uploading_and_custom', '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>{{ ta('widget_example', 'Widget Example') }}:</p><br/>
                                            {{ largeUploaderIframeHtml|raw }}

                                            <p style="margin-top: 16px;">{{ ta('widget_html_code', 'Widget HTML Code') }}:</p>
                                            <pre><code>{{ largeUploaderIframeHtml }}</code></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
     
                        <div class="clearfix col_12">
                            <div class="col_4">
                                <h3>{{ ta('medium_icon_uploader', 'Medium Icon Uploader') }}</h3>
                                <p>{{ ta('same_as_the_large_uploader_above_however_with_smaller_icons', '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>{{ ta('widget_example', 'Widget Example') }}:</p><br/>
                                            {{ largeNHUploaderIframeHtml|raw }}

                                            <p style="margin-top: 16px;">{{ ta('widget_html_code', 'Widget HTML Code') }}:</p>
                                            <pre><code>{{ largeNHUploaderIframeHtml }}</code></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="clearfix col_12">
                            <div class="col_4">
                                <h3>{{ ta('minimal_uploader', 'Minimal Uploader') }}</h3>
                                <p>{{ ta('less_formatting_button_uploaders_multiple_file_upload_chunked_uploading_useful_as_a_good_starting_point_for_customising_or', '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>{{ ta('widget_example', 'Widget Example') }}:</p><br/>
                                            {{ minimalUploaderIframeHtml|raw }}

                                            <p style="margin-top: 16px;">{{ ta('widget_html_code', '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={{ ta('submit', 'Submit')|json_encode()|raw }} class="button blue"/>
                                        <input type="reset" value={{ ta('cancel', 'Cancel')|json_encode()|raw }} 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">{{ ta('loading_folders', '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) {
                showError(XMLHttpRequest.responseText, 'popupMessageContainer');
            }
        });
    }
    else {
        $('.select-folder-wrapper').hide();
    }
}
$(function() {
	loadFolderList();
});
</script>
{% endblock %}