#requireResource("confluence.web.resources:ajs")
#requireResource("com.atlassian.auiplugin:jquery-selection")
#requireResource("confluence.editor.actions:editor-insertimage-popup")

<fieldset class="hidden parameters">
    <input type="hidden" id="formname" value="$generalUtil.htmlEncode($formname)">
    <input type="hidden" id="fieldname" value="markupTextarea">
</fieldset>

#parse ("/template/includes/actionerrors.vm")

## Error box for javascript validation
<div class="errorBox" id="popup-errorBox" style="display: none;">
<span class="errorMessage">$action.getText("errors.occurred")</span>
    <ul>
        <li id="noImageFileSpecifiedError">$action.getText("insert.image.popup.no.image.specified")</li>
    </ul>
</div>

#if ($page) ## if this popup was launched from editing an existing page
    #set ($canAttachImage = $action.hasAttachFilePermissions())
    #set ($parameterizedFormAction = "$generalUtil.appendAmpsandOrQuestionMark($generalUtil.htmlEncode(${formAction}))pageId=${pageId}&formname=$generalUtil.htmlEncode($formname)")
#else ## if this popup was launched from create page
    ## check for non-null remoteUser, to prevent anonymous users from attaching images to drafts
    ## this is because draft objects are stored in the session for anonymous users and attachments can only be associated with persistent CEOs
    #set ($canAttachImage = $remoteUser && $action.hasAttachFilePermissions())
    #set ($parameterizedFormAction = "$generalUtil.appendAmpsandOrQuestionMark($generalUtil.htmlEncode(${formAction}))draftType=$generalUtil.htmlEncode($draftType)&spaceKey=$generalUtil.htmlEncode($spaceKey)&formname=$generalUtil.htmlEncode($formname)")
#end
#if ($canAttachImage)
<div class="thickPadded">
    ## Note that so many form parameters are actually encoded in the action URL because of CONF-13707. Leave them there.
    <form method="POST" name="attachImageForm" action="$parameterizedFormAction" enctype="multipart/form-data">
        <input type="hidden" name="fieldname" value="$generalUtil.htmlEncode($!fieldname)">
        <input type="hidden" name="comment_0" value="">
        <span class="label">$action.getText("insert.image.popup.attach.image"):</span>
        <input type="file" name="file_0">
        <input type="submit" value="$action.getText('image.attach.file.button')">
    </form>
</div>
#end
<div class="thickPadded">
#if ($thumbnails.size > 0)
<table id="thumbnail-grid" cellspacing="0">
    #set ($tdWidth = $thumbnails.maxWidth + 14)
    #foreach ($row in $thumbnails.rows)
    <tr>
        #foreach ($thumb in $row)
            #if ($thumb == "BLANK")
                <td>&nbsp;</td>
            #else
                #set($originalFilename = $thumb.attachment.fileName)
                #set($encodedFilename = $generalUtil.htmlEncode($originalFilename))
                #set($shortenedFilename = $generalUtil.shortenString($originalFilename,20))
                #set($shortenedEncodedFilename = $generalUtil.htmlEncode($shortenedFilename))
                <td align="center" width="$tdWidth" title="$encodedFilename">
                    <a href="#" style="text-decoration: none" class="formtitle" title="$encodedFilename">$shortenedEncodedFilename</a><br>
                    <a href="#" title="$encodedFilename">$thumb.getThumbnailImageHtml('')</a>
                </td>
            #end
        #end
    </tr>
    #end
</table>
#else
    <p>$action.getText('no.images.attached.to.page')</p>
#end
</div>
<div class="thickPadded" style="background-color: #fafafa">
<form name="insertImageForm">
    <table border="0" style="padding: 5px;">
        <tr>
            <td width="1%">
                <span class="label">$action.getText("insert.image.popup.filename")</span>
            </td>
            <td>
                <input id="fileName" name="fileName" value="$generalUtil.htmlEncode($!action.fileName)" type="text" size="40">
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">$action.getText("insert.image.popup.thumbnail")</span>
            </td>
            <td>
                <input id="thumbnail" name="thumbnail" type="checkbox">
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">$action.getText("insert.image.popup.alignment")</span>
            </td>
            <td>
                <select id="alignment">
                    <option value="" >$action.getText("none.word")</option>
                    <option value="left">$action.getText("insert.image.popup.alignment.left")</option>
                    <option value="center">$action.getText("insert.image.popup.alignment.centre")</option>
                    <option value="right">$action.getText("insert.image.popup.alignment.right")</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>
            ## We bind the onclick here instead of binding in javascript because Selenium fails to close the windows otherwise.
            <input id="btnOk" type="button" value="$action.getText('ok')" class="Button" onclick="AJS.Popup.submit();"/>&nbsp;
            <input id="btnCancel" type="button" value="$action.getText('cancel.name')" class="Button" onclick="AJS.Popup.cancel();"/>
            </td>
        </tr>
    </table>
</form>
</div>
