<metal:block use-macro="container/macro_edit_view/macros/edit_view"
  xmlns:i18n="http://xml.zope.org/namespaces/i18n"
  i18n:domain="silva_document">
<metal:block fill-slot="edit_input">
  <script type="text/javascript" 
    tal:attributes="src python:request.model.get_container().absolute_url()+'/edit/reference.js'">
  </script>
  <tal:block define="alignment python:node.getAttribute('alignment');
                      getPathAdapter nocall:modules/Products/Silva/adapters/path/getPathAdapter;
                      pad python:getPathAdapter(request);">

<table cellpadding="3" cellspacing="0" border="0" width="100%">
  <tbody>
    <tr valign="top">
      <td class="invisible align-right" width="20%">
        <input type="button" class="transport" name="" value="get image reference..." title="access key: alt-g" accesskey="g"
          tal:define="asset_context python:here.get_start_container();"
          tal:attributes="onclick string: reference.getReference(
                                    function(path, id, title) {
                                      document.getElementsByName(
                                        'path'
                                      )[0].value = path;;
                                    },
                                    '${asset_context/absolute_url}',
                                    'Silva Image', true)"
          i18n:attributes="value;title" />
      </td>
      <td class="invisible align-left" style="white-space:nowrap;" colspan="3"
        tal:define="path python:pad.pathToUrlPath(node.getAttribute('path'));">  
        <input type="text" name="path" value=""
          tal:attributes="value path; style python:path and 'width:96%' or 'width:100%'" /><a title="edit image" 
          tal:condition="path"
          tal:attributes="href python:path + '/edit'" i18n:attributes="title"><img tal:attributes="src string:${silva_root}/globals/edit_element.gif" width="16" height="16" border="0" alt="edit element" i18n:attributes="alt" />
        </a>
      </td>
    </tr>
    <tr>
      <td class="invisible align-right" style="background:#d7e4f0;">
        <input type="button" class="transport" name="" value="get link reference..." title="create a hyperlink: alt-l" accesskey="l"
          tal:define="container node/get_container"
          tal:attributes="onclick string: reference.getReference(
                                    function(path, id, title) {
                                      document.getElementsByName(
                                        'link'
                                      )[0].value = path;;
                                    },
                                    '${container/absolute_url}',
                                    '', true)"
          i18n:attributes="value;title" />
      </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'" />
        <tal:block define="link python: node.getAttribute('link');
                            ispath python: link.find(':') == -1;
                            link python: ispath and pad.pathToUrlPath(link) or link;
                          ">
          <input id="data" style="width: 100%;" type="text" name="link" value=""
              tal:attributes="value link"  />
        </tal:block>
        <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%" i18n:translate="">High resolution version of image</span>
        </label>
      </td>
    </tr>
    <tr>
      <td class="invisible align-right" i18n:translate="">
        target frame
      </td>
      <td class="invisible align-left" 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'"/>
          <tal:block i18n:translate="">new window</tal:block>
        </label>
      </td>
    </tr>
    <tr>
      <td class="invisible align-right" style="background:#d7e4f0;" i18n:translate="">
        tooltip for link
      </td>
      <td class="invisible align-left" style="background:#d7e4f0;" 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" i18n:translate="">
        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" i18n:translate="">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" i18n:translate="">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" i18n:translate="">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" i18n:translate="">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" i18n:translate="">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" i18n:translate="">align right</label><br />
      </td>
    </tr>
  </tbody>
</table>
</tal:block>
</metal:block>

<metal:block fill-slot="edit_notes">
  <ul class="tips">
    <li i18n:translate="">Use &#8220;get image reference...&#8221; (alt-g) to locate an image, or type in the full path.
    </li>
    <li i18n:translate="">
      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 i18n:translate="">
      Set an optional target for the link. Turning on &#8220;new window&#8221; inserts &#8216;_blank&#8217; after saving.
    </li>
    <li i18n:translate="">
      It&#8217;s good practice to give the link of an image a title, which will appear as a tooltip.
    </li>
    <li i18n:translate="">
      A float alignment allows the next document element to wrap &#8211; if there&#8217;s room.
    </li>
  </ul>
</metal:block>
</metal:block>
