#requireResource("confluence.web.resources:prototype")
#requireResource("confluence.web.resources:scriptaculous")
#requireResource("confluence.web.resources:ajs")
#requireResource("confluence.web.resources:labels-editor")

#set( $labels = $helper.viewableLabels )

<fieldset class="hidden parameters">
    <legend>Labels parameters</legend>
    <input type="hidden" id="editLabel" value="$action.getText('edit.name')">
    <input type="hidden" id="addLabel" value="$action.getText('add.labels')">
    <input type="hidden" id="domainName" value="$bootstrap.domainName">
    <input type="hidden" id="pageId" value="$page.id">
    <input type="hidden" id="spaceKey" value="$generalUtil.urlEncode($spaceKey)">
</fieldset>

<div id="labels-section" class="pageSection">
    <div id="default-labels-header" class="section-header">
        <h2 id="labels-section-title" class="section-title #if($labels.size() == 0) hidden #end">$action.getText('labels.name')</h2>
        #if( $permissionCheckDispatcher.isPermittedForAjax("addLabelToEntity",[$page]) )
        #if($labels.size() == 0)
            <a id="labels-edit" href="#" class="show-labels-editor add">$action.getText('add.labels')</a>
        #else
            <a id="labels-edit" href="#" class="show-labels-editor">$action.getText('edit.name')</a>
        #end
        <a href="#" class="hide-labels-editor inline-control-link hidden">
            $action.getText('done.word')
        </a>
        #end
    </div>

    <div class="labels-editor">
        <div id="labelsList">
            #parse("/labels/labels-list.vm")
        </div>

        <span class="errorMessage error" id="errorSpan"></span>
        <form method="GET" action="" id="add-labels-form">
            <div id="labelInputSpan" class="labels-input">
                <div id="labelOperationErrorContainer" class="hidden">
                    <span class="error"><span class="errorMessage" id="labelOperationErrorMessage"></span></span>
                </div>

                <div class="caption">$action.getText("enter.labels.to.add.to.this.page")</div>

                <input autocomplete="off" id="labelsString" name="labelsString" value="$!labelsString" size="40">
                <input type="submit" class="add-labels" value="$action.getText('add.word')">
                <input type="submit" class="hide-labels-editor" value="$action.getText('done.word')">
                <div id="waitImageAndStatus">
                    <img class="waiting" alt="Please wait" src="$staticResourceUrlPrefix/images/icons/wait.gif">&nbsp;
                    <span id="labelOperationStatus" class="smalltext"></span>
                </div>
                <div class="auto_complete" id="labelsAutocompleteList"></div>
                <div class="labels-tip">
                    <div id="suggestedLabelsSpan"></div>
                    $action.getText("tip.start.typing")
                </div>
            </div>
        </form>
    </div>
</div>
