{extends "../window.tpl"}

{block tabs}

   {windowTab id='flapUsers' label={'searchSettings'|translate:'fulltext'}}

{/block}
{block title}
   {"searchSettings"|translate:"fulltext"}
{/block}
{block tabsContent}
   <div id="flapUsers" class="tab-pane fade boxFlex">

      <h1 class="h4 main-panel-title">{'synonyms'|translate:'fulltext'}</h1>
      {if $support == true}
         {'helpText'|translate:'fulltext' nofilter}

         <h1 class="h4 main-panel-title">{'synonymList'|translate:'fulltext'}</h1>

         <div id="addItem">
            <div class="row bottom-space">
               <div class="col-md-2">
                  <a href="#" data-form-add class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>&nbsp;{'addSynonyms'|translate:'fulltext'}</a>
               </div>

               <div class="col-md-3 pull-right">
                  <input type="submit" name="Reindex" class="btn btn-block btn-primary" value="{'reindex'|translate:'fulltext'}"/>
               </div>
            </div>
         </div>

         <div class="panel panel-default">
            <div class="panel-heading" style="padding:4px">
               <div class="row">

                  <div class="col-md-5">
                     <small><strong>{'searchTerm'|translate:'fulltext'}</strong></small>
                  </div>
                  <div class="col-md-1">
                  </div>
                  <div class="col-md-5">
                     <small><strong>{'synonym'|translate:'fulltext'}</strong></small>
                  </div>
               </div>
            </div>

            <ul class="list-group" id="items">
               <li class="list-group-item" data-form-new style="display: none;">

                  <div class="row">
                     <div class="col-md-5">
                        <input name="data[0][from]" type="text" size="5" class="id-user form-control input-sm">
                     </div>

                     <div class="col-md-1 text-center">
                        <i class="glyphicon glyphicon-arrow-right" style="line-height: 30px; color: #AAB2BD;"></i>
                     </div>
                     <div class="col-md-5">
                        <input name="data[0][to]" type="text" size="5" class="id-user form-control input-sm">
                     </div>

                     <div class="col-md-1">
                        <a class="btn-sm btn btn-danger" data-form-delete>
                           <input class="hidden" type="checkbox" name="data[0][delete]">
                           <span class="glyphicon glyphicon-remove"></span>
                        </a>
                     </div>
                  </div>
               </li>

               {foreach $synonyms as $line}
                  <li class="list-group-item" data-form-item>
                     <div class="row">
                        <div class="col-md-5">
                           <input name="data[{$line@index}][from]" type="text" value="{$line.from}" size="5" class="id-user form-control input-sm">
                        </div>
                        <div class="col-md-1 text-center">
                           <i class="glyphicon glyphicon-arrow-right" style="line-height: 30px; color: #AAB2BD;"></i>
                        </div>
                        <div class="col-md-5">
                           <input name="data[{$line@index}][to]" type="text" value="{$line.to}" size="5" class="id-user form-control input-sm">
                        </div>
                        <div class="col-md-1">
                           <a class="btn-sm btn btn-danger" data-form-delete>
                              <input class="hidden" type="checkbox" name="data[{$line@index}][delete]">
                              <span class="glyphicon glyphicon-remove"></span>
                           </a>
                        </div>
                     </div>
                  </li>
               {/foreach}
            </ul>
         </div>


      {else}
         <div class="alert alert-info">
            <p>{'synonymsSupport'|translate:'fulltext'}</p>
         </div>
      {/if}

   </div>
{/block}

<script type="text/javascript">
   {block onready append}
   initForm({
      selector: '#flapUsers'
   });
   {/block}
</script>