<@tools.diyMetadata itemType='layout' itemId=id><#assign a=object/></@tools.diyMetadata>
<form method="post" action="cmsDiy/saveLayout?navTabId=cmsDiy/list" autocomplete="off" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone);">
    <input type="hidden" name="_csrf" value="<@tools.csrfToken admin=true/>"/>
    <div class="formBar card">
        <ul>
        <#if a?has_content>
             <li><a class="button" href="cmsDiy/delete?itemType=layout&id=${(id?url)!}&navTabId=cmsDiy/list&_csrf=<@tools.csrfToken admin=true/>" title="<@t.page 'confirm.delete'/>" target="ajaxTodo"><i class="icon-trash icon-large"></i><@t.page 'button.delete'/></a></li>
        </#if>
            <li><button type="submit" class="buttonActive" title="ctrl+s"<#if id?has_content> lock-url="common/lock?itemType=layout&itemId=${(id?url)!}" close-url="common/unlock?itemType=layout&itemId=${(id?url)!}"</#if>><@t.page 'button.save'/></button></li>
        </ul>
    </div>
    <div class="card">
        <div class="pageFormContent" layoutH>
            <dl class="nowrap">
                <dt><@t.page 'id'/>:</dt></dt>
                <dd>
                    <input name="id" class="required" type="text" size="50" value="${(a.id)!getUUID()}"/>
                </dd>
            </dl>
            <dl class="nowrap">
                <dt><@t.page 'region'/>:</dt></dt>
                <dd>
                    <select name="region" class="combox">
                        <option value><@t.page 'please_select'/></option>
                 <@tools.diyMetadataList itemType="region">
                    <#list list as r>
                        <option value="${(r.id)!}"<#if (a.region)?has_content&&a.region=r.id> selected="selected"</#if>>${r.name!}</option>
                    </#list>
                </@tools.diyMetadataList>
                    </select>
                </dd>
            </dl>
            <dl class="nowrap">
                <dt><@t.page 'name'/>:</dt></dt>
                <dd>
                    <input name="name" class="required" type="text" maxlength="40" size="20" value="${(a.name)!}"/>
                </dd>
            </dl>
            <dl class="nowrap">
                <dt><@t.page 'template.content'/></dt>
                <dd>
                    <a class="button" href="cmsWebFile/lookup.html" target="dialog" mask="true"><@t.page 'webfile'/></a>
                    <a class="button" href="javascript:;" onclick="JUI.instances[$('textarea[name=template]',navTab.getCurrentPanel()).data('id')].replaceSelection('${r'<#-- position -->'}');return false;"><@t.page 'layout.insert'/></a>
                    <textarea name="template" class="code" escape="true" mode="freemarkermixed">${(a.template)!'<div class="container"><div class="row"><div class="col"><#-- position --></div><div class="col"><#-- position --></div></div></div>'}</textarea>
                </dd>
            </dl>
            <dl class="nowrap">
                <dt><@t.page 'style'/></dt>
                <dd>
                    <a class="button" href="javascript:;" onclick="JUI.instances[$('textarea[name=style]',navTab.getCurrentPanel()).data('id')].replaceSelection('${r'/* selecter */'}');return false;"><@t.page 'style.insert'/></a>
                    <textarea name="style" class="code" mode="css">${(a.style)!'/* selecter */ .row{clear:both;display:flex;}/* selecter */ .row .col{width:50%;float:left;}'}</textarea>
                    <span class="info"><@t.page 'style.description'/></span>
                </dd>
            </dl>
        </div>
    </div>
</form>