<div class="sidebar-toolbar">
    <div class="round-button-mono" id="sidebar-zone-more-button">
        <i class="material-icons">more_horiz</i>
    </div>
    <div class="margin-top-20"></div>
    <div class="round-button-mono {{if (is-equal tab 'index') 'selected'}}" {{action 'onChangeTab' 'index'}}>
        <i class="material-icons">view_headline</i>
    </div>
    <div class="margin-top-20"></div>
    <div class="round-button-mono {{if (is-equal tab 'attachments') 'selected'}}" {{action 'onChangeTab' 'attachments'}}>
        <i class="material-icons">attach_file</i>
    </div>
    {{#if session.authenticated}}
        <div class="margin-top-20"></div>
        <div class="round-button-mono {{if (is-equal tab 'activity') 'selected'}}" {{action 'onChangeTab' 'activity'}}>
            <i class="material-icons">timeline</i>
        </div>
    {{/if}}
</div>

<div class="sidebar-common">
    {{#if document.template}}
        <div class="template-header">Template</div>
    {{/if}}
    {{document/tag-editor documentTags=document.tags isEditor=isEditor onChange=(action 'onTagChange')}}
</div>

<div class="sidebar-wrapper">
    {{#if (is-equal tab 'index')}}
		{{document/sidebar-view-index document=document folder=folder pages=pages page=page isEditor=isEditor
			onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange') onGotoPage=(action 'onGotoPage')}}
    {{/if}}

    {{#if (is-equal tab 'attachments')}}
        {{document/sidebar-view-attachments document=document isEditor=isEditor}}
    {{/if}}

    {{#if (is-equal tab 'activity')}}
        {{document/sidebar-view-activity document=document pages=pages isEditor=isEditor}}
    {{/if}}
</div>

{{#dropdown-menu target="sidebar-zone-more-button" position="bottom left" open="click" onOpenCallback=(action 'onMenuOpen') onCloseCallback=(action 'onMenuOpen')}}
    <ul class="menu">
        {{#if session.authenticated}}
            {{#if (is-equal document.layout 'section')}}
                <li class="item" {{action 'onLayoutChange' 'doc'}}>Flat view</li>
                <li class="divider"></li>
            {{else}}
                <li class="item" {{action 'onLayoutChange' 'section'}}>Section view</li>
                <li class="divider"></li>
            {{/if}}
            {{#if pinState.isPinned}}
                <li class="item" {{action 'onUnpin'}}>Unpin</li>
            {{else}}
                <li class="item" id="pin-document-button">Pin</li>
            {{/if}}
            <li class="item" id="pin-document-button">
                {{#link-to 'document.history'}}History{{/link-to}}
            </li>
            <li class="divider"></li>
        {{/if}}

        {{#if isEditor}}
            <li class="item" id="save-template-button">Template</li>
            <li class="divider"></li>
        {{/if}}

        <li class="item" id="print-document-button" {{action 'onPrintDocument'}}>Print</li>

        {{#if isEditor}}
            <li class="divider"></li>
            <li class="item danger" id="delete-document-button">Delete</li>
        {{/if}}
    </ul>
{{/dropdown-menu}}

{{#if session.authenticated}}
    {{#if menuOpen}}
        {{#unless pinState.isPinned}}
            {{#dropdown-dialog target="pin-document-button" position="bottom left" button="Pin" color="flat-green" onAction=(action 'onPin') focusOn="pin-document-name" }}
                <div class="input-control">
                    <label>Pin Document</label>
                    <div class="tip">A 3 or 4 character name</div>
                    {{input type='text' id="pin-document-name" value=pinState.newName}}
                </div>
            {{/dropdown-dialog}}
        {{/unless}}
    {{/if}}

    {{#if isEditor}}
        {{#if menuOpen}}
            {{#dropdown-dialog target="delete-document-button" position="bottom left" button="Delete" color="flat-red" onAction=(action 'onDeleteDocument')}}
                <p>Are you sure you want to delete this document?</p>
                <p>There is no undo, so be careful.</p>
            {{/dropdown-dialog}}

            {{#dropdown-dialog target="save-template-button" position="bottom left" button="Save as Template" color="flat-green" onAction=(action 'onSaveTemplate') focusOn="new-template-name" }}
                <div class="input-control">
                    <label>Name</label>
                    <div class="tip">Short name for this type of document</div>
                    {{input type='text' id="new-template-name" value=saveTemplate.name}}
                </div>
                <div class="input-control">
                    <label>Excerpt</label>
                    <div class="tip">Explain use case for this template</div>
                    {{textarea value=saveTemplate.description rows="3" id="new-template-desc"}}
                </div>
            {{/dropdown-dialog}}
        {{/if}}
    {{/if}}
{{/if}}
