<metal:block use-macro="container/macro_edit_view/macros/edit_view">
<metal:block fill-slot="edit_input">
  <script type="text/javascript"
    tal:content="structure here/asset_reference.js" />
  <tal:block define="global alignment python:node.getAttribute('alignment')" />
  <table cellpadding="3" cellspacing="0" border="0" width="100%">
    <tr valign="top">
      <td class="invisible align-right" width="20%">
        <input type="button" class="navigation" name="" value="get image reference..." title="access key: alt-g" accesskey="g"
          tal:define="asset_context python:here.get_start_container();"
          tal:attributes="onclick python:'getAssetReference(\'%s/edit/asset_lookup?filter=Image&asset_context=%s\', \'_reference_\', \'focusbox\', \'path\');;return false;;' % (asset_context.absolute_url(), '/'.join(asset_context.getPhysicalPath()))" />
      </td>
      <td class="invisible align-right" colspan="3">  
        <input style="width:100%;" type="text" name="path" value=""
          tal:attributes="value python:node.getAttribute('path');"  />
      </td>
    </tr>
    <tr>
      <td class="invisible align-right" style="background:#d7e4f0;">
<input type="button" class="navigation" name="" value="get link reference..." title="Access key: alt-l" accesskey="l"
  tal:define="container node/get_container"
  tal:attributes="onclick python:'getAssetReference(\'%s/edit/hyperlink_lookup?asset_context=%s\', \'_reference_\', \'focusbox\', \'data\', 1);;return false;;' % (container.absolute_url(), '/'.join(container.getPhysicalPath()))" />
      </td>
      <td class="invisible align-left" style="background:#d7e4f0;" colspan="3">
        <input type="radio" name="link_selector" value="entered_url"
                tal:attributes="checked python:node.getAttribute('link_to_hires') != '1'"/>
        <input style="width: 100%;" type="text" id="data" name="link" value=""
            tal:attributes="value python:node.getAttribute('link');"  />
        <br />
        <label>
            <input type="radio" name="link_selector" value="hiresimg_url" 
                tal:attributes="checked python:node.getAttribute('link_to_hires') == '1'"/>
            <span style="width:100%">High resolution version of image</span>
        </label>
      </td>
    </tr>
    <tr>
      <td class="invisible align-right" style="background:#d7e4f0;">
        target frame
      </td>
      <td class="invisible align-left" style="background:#d7e4f0;" colspan="3">  
        <input type="radio" name="target_selector" value="_user" 
            tal:attributes="checked python:node.getAttribute('target') != '_blank'"
        />
        <input style="width:100%;" type="text" name="target" value=""
          tal:attributes="value python:node.getAttribute('target');"  />
        <br />
        <label>
            <input type="radio" name="target_selector" value="_blank"
              tal:attributes="checked python:node.getAttribute('target') == '_blank'"/>
            new window
        </label>
      </td>
    </tr>
    <tr>
      <td class="invisible align-right">
        tooltip for hyperlink
      </td>
      <td class="invisible align-left" colspan="3">  
        <input style="width:100%;" type="text" name="title" value=""
          tal:attributes="value python:node.getAttribute('title');"  />
      </td>
    </tr>
    <tr>
      <td class="invisible align-right">
        image alignment
      </td>
      <td class="invisible">
        <input type="radio" name="alignment" value="float-left" id="float-left"
          tal:condition="python:alignment != 'float-left'" />
        <input type="radio" name="alignment" value="float-left" id="float-left" checked=""
          tal:condition="python:alignment == 'float-left'" />
        <label for="float-left">Float left</label><br />
        <input type="radio" name="alignment" value="image-left" id="image-left"
          tal:condition="python:alignment != 'image-left'" />
        <input type="radio" name="alignment" value="none" id="image-left" checked=""
          tal:condition="python:alignment == 'image-left'" />
        <label for="image-left">Align left</label><br />
      </td>
      <td class="invisible">
        <input type="radio" name="alignment" value="none" id="none"
          tal:condition="python:alignment != ''" />
        <input type="radio" name="alignment" value="none" id="none" checked=""
          tal:condition="python:alignment == ''" />
        <label for="none">Default</label><br />
        <input type="radio" name="alignment" value="image-center" id="image-center"
          tal:condition="python:alignment != 'image-center'" />
        <input type="radio" name="alignment" value="image-center" id="image-center" checked=""
          tal:condition="python:alignment == 'image-center'" />
        <label for="image-center">Align center</label><br />
      </td>
      <td class="invisible">
        <input type="radio" name="alignment" value="float-right" id="float-right"
          tal:condition="python:alignment != 'float-right'" />
        <input type="radio" name="alignment" value="float-right" id="float-right" checked=""
          tal:condition="python:alignment == 'float-right'" />
        <label for="float-right">Float right</label><br />
        <input type="radio" name="alignment" value="image-right" id="image-right"
          tal:condition="python:alignment != 'image-right'" />
        <input type="radio" name="alignment" value="image-right" id="image-right" checked=""
          tal:condition="python:alignment == 'image-right'" />
        <label for="image-right">Align right</label><br />
      </td>
    </tr>
  </table>
</metal:block>
<metal:block fill-slot="edit_notes">
  <ul class="tips">
    <li>Use &#8220;get image reference...&#8221; (alt-g) to locate an image, or type in the full path.
    </li>
    <li>
      Set a URL to make this image a link (alt-l). To link to other sites, prepend &#8216;http://&#8217; to the address.
    </li>
    <li>
      Set an optional target for the link. Turning on &#8220;new window&#8221; inserts &#8216;_blank&#8217; after saving.
    </li>
    <li>
      It&#8217;s good practice to give the link of an image a title, which will appear as a tooltip.
    </li>
    <li>
      A float alignment allows the next document element to wrap &#8211; if there&#8217;s room.
    </li>
  </ul>
</metal:block>
</metal:block>
