{% 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">
                <div class="page-title">
                    <div class="title_left">
                        <h3>{{ ta('plugin_name_settings', '[[[PLUGIN_NAME]]] Settings', {'PLUGIN_NAME': pluginName}) }}</h3>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="widget_inside">
                    {{ msg_page_notifications|raw }}
                    <form method="POST" action="{{ ADMIN_WEB_ROOT }}/plugin/sociallogin/settings" name="pluginForm" id="pluginForm" autocomplete="off" enctype="multipart/form-data" class="form-horizontal">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>{{ ta('plugin_state', 'Plugin State') }}</h2>
                                <div class="clear"></div>
                            </div>
                            <div class="x_content">
                                <p>{{ ta('whether_this_plugin_is_enabled', 'Whether this plugin is enabled.') }}</p>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('plugin_enabled', 'Plugin Enabled') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <select name="plugin_enabled" id="plugin_enabled" class="form-control">
                                            {% for k,yesNoOption in yesNoOptions %}
                                                <option value="{{ k }}"{% if plugin_enabled == k %} SELECTED{% endif %}>{{ yesNoOption }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="x_panel">
                            <div class="x_title">
                                <h2>{{ ta('facebook', 'Facebook') }}</h2>
                                <div class="clear"></div>
                            </div>
                            <div class="x_content">
                                <p>{{ ta('whether_to_allow_facebook_logins_and_your_api_details', 'Whether to allow Facebook logins and your API details.') }}</p>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('enable_facebook', 'Enable Facebook') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <select name="facebook_enabled" class="form-control socialToggle">
                                            {% for k,yesNoOption in yesNoOptions %}
                                                <option value="{{ k }}"{% if facebook_enabled == k %} SELECTED{% endif %}>{{ yesNoOption }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('app_id', 'App ID') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" name="facebook_application_id" class="form-control" value="{{ facebook_application_id }}"/>
                                    </div>
                                </div>

                                <div class="form-group alt-highlight socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('app_secret', 'App Secret') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" name="facebook_application_secret" class="form-control" value="{{ facebook_application_secret }}"/>
                                    </div>
                                </div>

                                <div class="form-group alt-highlight socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('app_configuration', 'App Configuration') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12 formTextBlock">
                                        {{ ta('sociallogin_facebook_guidance', '<ol>
                                            <li>Go to <a href="https://developers.facebook.com/apps" target="_blank">https://developers.facebook.com/apps</a> and create a new application.</li>
                                            <li>Select "For Everything Else" in the popup.</li>
                                            <li>Fill out any required fields such as the application name and description. Click "Create App ID".</li>
                                            <li>On the new application details page, go to the "Add a Product" section, find "Facebook login" and click "Set Up".</li>
                                            <li>On the following screen select "www" web.</li>
                                            <li>Set \'Site Url\' as:<br/>
                                                <code>[[[WEB_ROOT]]]</code></li>
                                            <li>Click "Continue"/"Next" until you get to "Step 5".</li>
                                            <li>Click "Settings" on the left for "Facebook login". Set the "Valid OAuth Redirect URIs" as below:<br/>
                                                <code>[[[PLUGIN_WEB_ROOT]]]/sociallogin/login/Facebook</code></li>
                                            <li>Click "Settings" > "Basic" on the left (under "Dashboard". Set the "App Domains" to:<br/>
                                                <code>[[[_CONFIG_SITE_HOST_URL]]]</code></li>
                                            <li>Set \'Contact Email\' as your website email address.</li>
                                            <li>Set \'Privacy Policy URL\' to:<br/>
                                                <code>[[[WEB_ROOT]]/privacy</code></li>
                                            <li>Set \'Terms of Service URL\' to:<br/>
                                                <code>[[[WEB_ROOT]]/terms</code></li>
                                            <li>Once you have finished, save then copy and paste the created application credentials into the fields above.</li>
                                            <li>Click on \'Status & Review\' and set \'Do you want to make this app and all its live features available to the general public?\' to \'YES\'.</li>
                                        </ol>', {'WEB_ROOT': WEB_ROOT, 'PLUGIN_WEB_ROOT': PLUGIN_WEB_ROOT, '_CONFIG_SITE_HOST_URL': ConfigHelper.getSiteHostURL()})|raw }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>{{ ta('X_com', 'X.com (Twitter)') }}</h2>
                                <div class="clear"></div>
                            </div>
                            <div class="x_content">
                                <p>{{ ta('whether_to_allow_x_com_logins_and_your_api_details', 'Whether to allow X.com (Twitter) logins and your API details.') }}</p>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('enable_x_com', 'Enable X.com (Twitter)') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <select name="twitter_enabled" class="form-control socialToggle">
                                            {% for k,yesNoOption in yesNoOptions %}
                                                <option value="{{ k }}"{% if twitter_enabled == k %} SELECTED{% endif %}>{{ yesNoOption }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('consumer_id', 'Consumer ID') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" name="twitter_application_key" class="form-control" value="{{ twitter_application_key }}"/>
                                    </div>
                                </div>

                                <div class="form-group alt-highlight socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('consumer_secret', 'Consumer Secret') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" name="twitter_application_secret" class="form-control" value="{{ twitter_application_secret }}"/>
                                    </div>
                                </div>

                                <div class="form-group alt-highlight socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('app_configuration', 'App Configuration') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12 formTextBlock">
                                        {{ ta('sociallogin_twitter_guidance', '<ol>
                                            <li>Go to <a href="https://dev.twitter.com/apps" target="_blank">https://dev.twitter.com/apps</a> and create a new application.</li>
                                            <li>If you don\'t have a developers account, you may need to apply for this before you can create any apps.</li>
                                            <li>Fill out any required fields such as the application name and description.</li>
                                            <li>Set the\'Website URL\' as:<br/>
                                            <code>[[[WEB_ROOT]]]</code></li>
                                            <li>Set the \'Callback URL\' as:<br/>
                                            <code>[[[PLUGIN_WEB_ROOT]]]/sociallogin/login/Twitter</code></li>
                                            <li>Set the \'Terms of Service URL\' as:<br/>
                                            <code>[[[WEB_ROOT]]]/terms</code></li>
                                            <li>Set the \'Privacy Policy URL\' as:<br/>
                                            <code>[[[WEB_ROOT]]]/privacy</code></li>
                                            <li>Click the \'Create\' button.</li>
                                            <li>Once created, open the "Permissions" tab. Edit the the permissions and set "Access permission" to read only.</li>
                                            <li>On the same permissions screen, ensure you check "Request email address from users" in "Additional permissions". Click "Save".</li>
                                            <li>Open the \'Keys and tokens\' tab of the application and copy &amp; paste the application credentials above.</li>
                                            </ol>', {'WEB_ROOT': WEB_ROOT, 'PLUGIN_WEB_ROOT': PLUGIN_WEB_ROOT, '_CONFIG_SITE_HOST_URL': ConfigHelper.getSiteHostURL()})|raw }}
                                    </div>
                                </div>
                            </div>
                        </div>
                                            
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>{{ ta('google', 'Google') }}</h2>
                                <div class="clear"></div>
                            </div>
                            <div class="x_content">
                                <p>{{ ta('whether_to_allow_google_logins_and_your_api_details', 'Whether to allow Google logins and your API details.') }}</p>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('enable_google', 'Enable Google') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <select name="google_enabled" class="form-control socialToggle">
                                            {% for k,yesNoOption in yesNoOptions %}
                                                <option value="{{ k }}"{% if google_enabled == k %} SELECTED{% endif %}>{{ yesNoOption }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('client_id', 'Client ID') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" name="google_application_id" class="form-control" value="{{ google_application_id }}"/>
                                    </div>
                                </div>

                                <div class="form-group alt-highlight socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('client_secret', 'Client Secret') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" name="google_application_secret" class="form-control" value="{{ google_application_secret }}"/>
                                    </div>
                                </div>

                                <div class="form-group alt-highlight socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('app_configuration', 'App Configuration') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12 formTextBlock">
                                        {{ ta('sociallogin_google_guidance', '<ol>
                                            <li>Go to <a href="https://code.google.com/apis/console/" target="_blank">https://code.google.com/apis/console/</a> and create a new project.</li>
                                            <li>Fill out any required fields such as the project name.</li>
                                            <li>Once created, view the project page.</li>
                                            <li>Go to the "OAuth consent screen" page linked on the left and select "External". Click "Create".</li>
                                            <li>Set the application name and a logo.</li>
                                            <li>Set the following in "Authorised domains":<br/>
                                                <code>[[[_CONFIG_SITE_HOST_URL]]]</code></li>
                                            <li>Set the following in "Application Homepage link":<br/>
                                                <code>[[[WEB_ROOT]]]</code></li>
                                            <li>Set the following in "Application Privacy Policy link":<br/>
                                                <code>[[[WEB_ROOT]]]/privacy</code></li>
                                            <li>Set the following in "Application Terms of Service link":<br/>
                                                <code>[[[WEB_ROOT]]]/terms</code></li>
                                            <li>On the left menu select "Domain verification" and "Add domain". Enter the domain and click "Add domain":
                                                <code>[[[_CONFIG_SITE_HOST_URL]]]</code></li>
                                            <li>Once verified, go back to the "Domain verification" page and ensure it\'s listed.</li>
                                            <li>In the project click on "Credentials" on the left menu, then "Create Credentials" near the top-middle of the page. Select "OAuth client ID".</li>
                                            <li>Set the "Application type" as "Web application". Add "Authorised redirect URIs" as below and click "Create":
                                            <code>[[[PLUGIN_WEB_ROOT]]]/sociallogin/login/Google</code></li>
                                            <li>Copy the client ID and Secret in the fields above.</li>
                                            <li>You will need to submit your application for approval so it\'s not limited to 100 logins.</li>
                                        </ol>', {'WEB_ROOT': WEB_ROOT, 'PLUGIN_WEB_ROOT': PLUGIN_WEB_ROOT, '_CONFIG_SITE_HOST_URL': ConfigHelper.getSiteHostURL()})|raw }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="x_panel social_login_foursquare">
                            <div class="x_title">
                                <h2>{{ ta('foursquare', 'Foursquare') }}</h2>
                                <div class="clear"></div>
                            </div>
                            <div class="x_content">
                                <p>{{ ta('whether_to_allow_foursquare_logins_and_your_api_details', 'Whether to allow Foursquare logins and your API details.') }}</p>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('enable_foursquare', 'Enable Foursquare') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <select name="foursquare_enabled" class="form-control socialToggle">
                                            {% for k,yesNoOption in yesNoOptions %}
                                                <option value="{{ k }}"{% if foursquare_enabled == k %} SELECTED{% endif %}>{{ yesNoOption }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('client_id', 'Client ID') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" name="foursquare_application_id" class="form-control" value="{{ foursquare_application_id }}"/>
                                    </div>
                                </div>

                                <div class="form-group alt-highlight socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('client_secret', 'Client Secret') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" name="foursquare_application_secret" class="form-control" value="{{ foursquare_application_secret }}"/>
                                    </div>
                                </div>

                                <div class="form-group alt-highlight socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('app_configuration', 'App Configuration') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12 formTextBlock">
                                        {{ ta('sociallogin_four_square_guidance', '<ol>
                                            <li>Go to <a href="https://foursquare.com/developers/register" target="_blank">https://foursquare.com/developers/register</a> and create a new application.</li>
                                            <li>Fill out any required fields such as the application name and description.</li>
                                            <li>Set \'Application URL\' as:<br/>
                                                <code>[[[WEB_ROOT]]]</code></li>
                                            <li>Set \'Privacy Policy URL\' as:<br/>
                                                <code>[[[WEB_ROOT]]]/privacy</code></li>
                                            <li>Set \'Redirect URL\' as:<br/>
                                                <code>[[[PLUGIN_WEB_ROOT]]]/sociallogin/login/Foursquare</code></li>
                                            <li>Save changes. Once you have finished, copy and paste the created application credentials above.</li>
                                        </ol>', {'WEB_ROOT': WEB_ROOT, 'PLUGIN_WEB_ROOT': PLUGIN_WEB_ROOT, '_CONFIG_SITE_HOST_URL': ConfigHelper.getSiteHostURL()})|raw }}
                                    </div>
                                </div>
                            </div>
                        </div>

                       <div class="x_panel social_login_linkedin">
                            <div class="x_title">
                                <h2>{{ ta('linkedin', 'LinkedIn') }}</h2>
                                <div class="clear"></div>
                            </div>
                            <div class="x_content">
                                <p>{{ ta('whether_to_allow_linkedin_logins_and_your_api_details', 'Whether to allow LinkedIn logins and your API details.') }}</p>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('enable_linkedin', 'Enable LinkedIn') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <select name="linkedin_enabled" class="form-control socialToggle">
                                            {% for k,yesNoOption in yesNoOptions %}
                                                <option value="{{ k }}"{% if linkedin_enabled == k %} SELECTED{% endif %}>{{ yesNoOption }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('client_id', 'Client ID') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" name="linkedin_application_key" class="form-control" value="{{ linkedin_application_key }}"/>
                                    </div>
                                </div>

                                <div class="form-group alt-highlight socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('client_secret', 'Client Secret') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" name="linkedin_application_secret" class="form-control" value="{{ linkedin_application_secret }}"/>
                                    </div>
                                </div>

                                <div class="form-group alt-highlight socialToggleWrapper">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('app_configuration', 'App Configuration') }}:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12 formTextBlock">
                                        {{ ta('sociallogin_linkedin_guidance_2', '<ol>
                                            <li>Go to <a href="https://www.linkedin.com/developers/" target="_blank">https://www.linkedin.com/developers/</a> and create a new application.</li>
                                            <li>Set \'Privacy Policy URL\' to:<br/>
                                                <code>[[[WEB_ROOT]]]/privacy</code></li>
                                            <li>Fill out any required fields such as the application name and description.</li>
                                            <li>Once the application is created, on the settings tab, put the following url in the \'Widgets\' > \'Domains\' field:<br/>
                                                <code>[[[WEB_ROOT]]]</code></li>
                                            <li>On the Auth tab, ensure the following url is set in any OAuth redirect urls:<br/>
                                                <code>[[[PLUGIN_WEB_ROOT]]]/sociallogin/login/LinkedIn</code></li>
                                            <li>On the Products tab, select "Sign In with LinkedIn using OpenID Connect" and click "Request access".</li>
                                            <li>Once you have finished, copy and paste the Client ID & Client Secret into the above fields.</li>
                                        </ol>', {'WEB_ROOT': WEB_ROOT, 'PLUGIN_WEB_ROOT': PLUGIN_WEB_ROOT, '_CONFIG_SITE_HOST_URL': ConfigHelper.getSiteHostURL()})|raw }}
                                    </div>
                                </div>
                            </div>
                        </div>
                                            
                        <div class="x_panel">
                            <div class="x_content">
                                <div class="clearfix">
                                    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                                        <input type="submit" value={{ ta('update_settings', 'Update Settings')|json_encode()|raw }} class="btn btn-primary"/>
                                        <input type="reset" value={{ ta('cancel', 'Cancel')|json_encode()|raw }} class="btn btn-default" onclick="window.location = '{{ ADMIN_WEB_ROOT }}/plugin_manage';"/>
                                    </div>
                                </div>
                            </div>
                        </div>

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

{% block head_js %}
    <script>
        $(document).ready(function () {
            $(".socialToggle").each(function () {
                toggleSocial(this);
            });

            $(".socialToggle").change(function () {
                toggleSocial(this);
            });
        });

        function toggleSocial(ele)
        {
            if ($(ele).val() == 1)
            {
                $(ele).parents('.x_content').find('.socialToggleWrapper').show();
            } else
            {
                $(ele).parents('.x_content').find('.socialToggleWrapper').hide();
            }
        }
    </script>
{% endblock %}