<%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %>
<%block name="title">Advanced</%block>
<%block name="bodyclass">is-signedin course advanced settings</%block>

<%namespace name='static' file='static_content.html'/>
<%!
from contentstore import utils
%>

<%block name="jsextra">

<script type="text/javascript" src="${static.url('js/template_loader.js')}"></script>
<script type="text/javascript" src="${static.url('js/views/server_error.js')}"></script>
<script type="text/javascript" src="${static.url('js/views/validating_view.js')}"></script>
<script type="text/javascript" src="${static.url('js/models/settings/advanced.js')}"></script>
<script type="text/javascript" src="${static.url('js/views/settings/advanced_view.js')}"></script>

<script type="text/javascript">
    $(document).ready(function () {

        // proactively populate advanced b/c it has the filtered list and doesn't really follow the model pattern
        var advancedModel = new CMS.Models.Settings.Advanced(${advanced_dict | n}, {parse: true});
        advancedModel.blacklistKeys = ${advanced_blacklist | n};
        advancedModel.url = "${reverse('course_advanced_settings_updates', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}";

        var editor = new CMS.Views.Settings.Advanced({
            el: $('.settings-advanced'),
            model: advancedModel
        });

        editor.render();

    });

</script>
</%block>

<%block name="content">
<div class="wrapper-content wrapper">
    <section class="content">
        <header class="page">
            <span class="title-sub">Settings</span>

            <h1 class="title-1">Advanced</h1>
        </header>


        <article class="content-primary" role="main">
            <section class="settings-advanced">
                <div class="message message-status confirm is-shown">
                    Your policy changes have been saved.
                </div>

                <div class="message message-status error is-shown">
                    There was an error saving your information. Please see below.
                </div>

                <section class="settings-advanced-policies">
                    <header>
                        <h3>Manual Policy Definition</h3>
                        <span class="detail">Manually Edit Course Policy Values (JSON Key and Pair values)</span>
                    </header>

                    <p class="instructions"><strong>Warning</strong>: Add only manual policy data that you are familiar
                        with.</p>

                    <div class="row">
                        <div class="field enum">

                            <!-- basic empty & initial empty field (if user had no values yet) -->
                            <ul class="input-list course-advanced-policy-list">
                            </ul>

                            <!-- advanced policy actions -->
                            <div class="actions actions-advanced-policies">
                                <a href="#" class="new-button new-advanced-policy-item add-policy-data">
                                    <span class="plus-icon white"></span>New Manual Policy
                                </a>
                            </div>

                        </div>
                    </div>
                </section>
                <!-- .settings-advanced-policies -->
            </section>
        </article>

        <!-- notification: change has been made and a save is needed -->
        <div class="wrapper wrapper-notification wrapper-notification-warning">
            <div class="notification warning">
                <div class="copy">
                    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>

                    <p><strong>Note: </strong>Your changes will not take effect until you <strong>save your
                        progress</strong>. Be careful with syntax as validation is <strong>not implemented</strong>.</p>
                </div>

                <div class="actions">
                    <ul>
                        <li><a href="#" class="save-button">Save</a></li>
                        <li><a href="#" class="cancel-button">Cancel</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
</div>
</%block>