{*
 The comment list is defined inside a tabsheet made with the jQuery $().tabs()
 With jQuery 1.2.6 (don't know how other release manage this) all the anchors <A> tags are considered as a tab.
 So, can't use <A href="link"> because href is modified by the jQuery function.
 Links are managed by an event onclick="document.location='link';"
*}

<script type="text/javascript">
{literal}
  function editInside(url, text, imageId, key, index)
  {
    $('#editInside'+index).get(0).appendChild($("#formEditInside").get(0));
    $("#formEditInside").css('display', 'block');
    $('#feiKey').val(key);
    $('#feiImageId').val(imageId);
    $('#contentEditId').val(text);
    $('#editComment').attr('action', url);

  }
{/literal}

</script>


<div id="formEditInside" style="display:none;">
  <form  method='post' action='' class='filter' id='editComment'>
    <fieldset>
      <legend>{'Edit a comment'|@translate}</legend>
      <textarea name='content' id='contentEditId' rows='5' cols='80'></textarea></label><br>
      <input type='hidden' name='key' id='feiKey' value=''>
      <input type='hidden' name='image_id' id='feiImageId' value=''>
      <input class='submit' type='submit' value='{"Submit"|@translate}'>
    </fieldset>
  </form>
</div>

<ul class="commentList">
{foreach from=$comments item=comment name=comment_loop}
<li>
  <div class="commentDetail">
    {if isset($comment.TN_SRC)}
    <div class="illustration">
      <a href="{$comment.U_PICTURE}">
        <img src="{$comment.TN_SRC}" alt="{$comment.ALT}" />
      </a>
    </div>
    {/if}
    <div class="description">
      {if isset($comment.U_DELETE) or isset($comment.U_VALIDATE) or isset($comment.U_EDIT) }
      <ul class="actions" style="float:right">
        {if isset($comment.U_DELETE)}
        <li>
          <span class="button id_delete" onclick="document.location='{$comment.U_DELETE}';" title="{'delete this comment'|@translate}"></span>
        </li>
        {/if}

        {if isset($comment.U_EDIT) and !isset($comment.IN_EDIT)}
        <li>
          {php}
            /*
              this php code is used to calculate the key need to be allowed to
              edit the comment, and determine the picture number if necessary
              (theses properties are not in the template var because with the
              default template, Piwigo reloads the page for editing an item :
              this template is abble to edit an item without reloading the page)
            */
            global $conf;
            $comment=$this->get_template_vars('comment');
            $current=$this->get_template_vars('current');
            if(!array_key_exists('image_id', $comment))
            {
              if(isset($current['id']))
              {
                $comment['IMAGE_ID']=$current['id'];
              }
              else
              {
                preg_match('#picture\.php\?/(\d+)/category/#i', $comment['U_PICTURE'], $result);
                if(isset($result[1]))
                {
                  $comment['IMAGE_ID']=$result[1];
                }
              }
            }
            $now=time();
            $comment['KEY']=$now.":".hash_hmac('md5', $now.':'.$comment['IMAGE_ID'], $conf['secret_key']);
            $this->assign_by_ref('comment', $comment);
          {/php}
          <span class="button id_edit" onclick="editInside('{$comment.U_EDIT}#edit_comment}', '{$comment.CONTENT|@escape}', {$comment.IMAGE_ID|@default:$current.id}, '{$comment.KEY}', {$smarty.foreach.comment_loop.index});" title="{'edit this comment'|@translate}"></span>

        </li>
        {/if}

        {if isset($comment.U_VALIDATE)}
        <li>
          <span class="button id_validate" onclick="document.location='{$comment.U_VALIDATE}';" title="{'validate this comment'|@translate}"></span>
        </li>
        {/if}
      </ul>
      {/if}
      <span class="author">{$comment.AUTHOR}</span> - <span class="date">{$comment.DATE}</span>

      <div id="editInside{$smarty.foreach.comment_loop.index}">
        <blockquote>{$comment.CONTENT}</blockquote>
      </div>

    </div>
  </div>
</li>

{/foreach}
</ul>