<%inherit file="base.html" />
<%def name="online_help_token()"><% return "content_libraries" %></%def>
<%!
import json

from contentstore.views.helpers import xblock_studio_url, xblock_type_display_name
from django.utils.translation import ugettext as _
%>
<%block name="title">${context_library.display_name_with_default} ${xblock_type_display_name(context_library)}</%block>
<%block name="bodyclass">is-signedin course container view-container view-library</%block>

<%namespace name='static' file='static_content.html'/>

<%block name="header_extras">
% for template_name in templates:
<script type="text/template" id="${template_name}-tpl">
    <%static:include path="js/${template_name}.underscore" />
</script>
% endfor
</%block>

<%block name="requirejs">
    require(["js/factories/library"], function(LibraryFactory) {
        LibraryFactory(
            ${component_templates | n},
            ${json.dumps(xblock_info) | n},
            {
                isUnitPage: false,
                page_size: 10,
                canEdit: ${"true" if can_edit else "false"}
            }
        );
    });
</%block>

<%block name="content">


<div class="wrapper-mast wrapper">
    <header class="mast has-actions has-navigation has-subtitle">
        <div class="page-header">
            <small class="subtitle">${_("Content Library")}</small>
            <div class="wrapper-xblock-field incontext-editor is-editable"
                 data-field="display_name" data-field-display-name="${_("Display Name")}">
                <h1 class="page-header-title xblock-field-value incontext-editor-value"><span class="title-value">${context_library.display_name_with_default | h}</span></h1>
            </div>
        </div>

        <nav class="nav-actions" aria-label="${_('Page Actions')}">
            <h3 class="sr">${_("Page Actions")}</h3>
            <ul>
                <li class="nav-item">
                    <a href="#" class="button new-button new-component-button">
                        <i class="icon fa fa-plus icon-inline"></i> <span class="action-button-text">${_("Add Component")}</span>
                    </a>
              </li>
            </ul>
        </nav>
    </header>
</div>

<div class="wrapper-content wrapper">
    <div class="inner-wrapper">
        <section class="content-area">

            <article class="content-primary">
                <div class="container-message wrapper-message"></div>
                <section class="wrapper-xblock level-page is-hidden studio-xblock-wrapper" data-locator="${context_library.location | h}" data-course-key="${context_library.location.library_key | h}">
                </section>
                <div class="ui-loading">
                    <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">${_("Loading")}</span></p>
                </div>
            </article>
            <aside class="content-supplementary" role="complementary">
                <div class="library-location">
                    <h4 class="bar-mod-title">${_("Library ID")}</h4>
                    <div class="wrapper-library-id bar-mod-content">
                        <h5 class="title">${_("Library ID")}</h5>
                        <p class="library-id">
                            <span class="library-id-value">${context_library.location.library_key | h}</span>
                            <span class="tip"><span class="sr">${_("Tip:")}</span> ${_("To add content from this library to a course that uses a Randomized Content Block, copy this ID and enter it in the Libraries field in the Randomized Content Block settings.")}</span>
                        </p>
                    </div>
                </div>
                % if can_edit:
                <div class="bit">
                    <h3 class="title-3">${_("Adding content to your library")}</h3>
                    <p>${_("Add components to your library for use in courses, using Add New Component at the bottom of this page.")}</p>
                    <p>${_("Components are listed in the order in which they are added, with the most recently added at the bottom. Use the pagination arrows to navigate from page to page if you have more than one page of components in your library.")}</p>
                    <h3 class="title-3">${_("Using library content in courses")}</h3>
                    <p>${_("Use library content in courses by adding the {em_start}library_content{em_end} policy key to Advanced Settings, then adding a Randomized Content Block to your courseware. In the settings for each Randomized Content Block, enter the Library ID for each library from which you want to draw content, and specify the number of problems to be randomly selected and displayed to each student.").format(em_start='<strong>', em_end="</strong>")}</p>
                </div>
                % endif
                <div class="bit external-help">
                    <a href="${get_online_help_info('library')['doc_url']}" target="_blank" class="button external-help-button">${_("Learn more about content libraries")}</a>
                </div>
            </aside>
        </section>
    </div>
</div>
</%block>