{extends "[shared]window.tpl"}

{block tabs}
   {windowTab id='flapSettings' label=translate('settings')}
{/block}

{block tabsContent}
<div id="flapSettings" class="tab-pane fade active in boxStatic">
   <h1 class="h4 main-panel-title">{translate_type type='feedMaps'}</h1>
   <div class="form-group">
      <div class="col-md-2 control-label"><label>{'name'|translate}</label></div>
      <div class="col-md-10">
         <input type="text" class="form-control input-sm" name="data[name]" size="20" maxlength="50" value="{$body.data.name}" />
      </div>
   </div>

   <div data-values="wrap">
      <h1 class="h4 main-panel-title">
         {'items'|translate}</h1>
      <div class="row bottom-space">
         <div class="col-md-3">
            <a href="#" data-form-add class="btn btn-success btn-block"><span class="glyphicon glyphicon-plus"></span>&nbsp;{'buttonAddItem'|translate}</a>
         </div>
         {if $body.acn === 'edit'}
            <div class="col-md-3">
               <a href="launch.php?s=feedMaps.php&acn=export&ID={$body.data.id}" class="btn btn-default btn-block"><span class="glyphicon glyphicon-export"></span>&nbsp;{'buttonExport'|translate}</a>
            </div>
         {/if}
         <div class="col-md-3">
            <input type="file" class="filestyle" name="xlsxImport" data-iconName="glyphicon-folder-open" data-buttonText="{'buttonImport'|translate}"/>
         </div>
      </div>

      <div class="panel-group panel-group-lists" data-values="items">

         {block listHeader}
            <div class="panel">
               <div class="panel-heading">
                  <div class="row">
                     <div class="col-md-3 text-left col-md-offset-1" style="padding-left: 0;">
                        <small><strong>{'Phrase'|translate}</strong></small>
                     </div>
                     <div class="col-md-4">
                        <small><strong>{'Description'|translate}</strong></small>
                     </div>
                     <div class="col-md-4">
                        <small><strong>{'Value'|translate}</strong></small>
                     </div>
                  </div>
               </div>
            </div>
         {/block}

         {foreach [[]] + $body.values as $key => $row}
            <div class="panel" {if $key == 0}data-form-new style="display:none" {else}data-form-item{/if}>
               {block ListRow}
                  <div class="row bottom-space">
                     <div class="col-md-3">
                        <div class="{if isSuperuser()}input-group{/if}">
                           {if isSuperuser()}
                              <span class="input-group-addon" style="padding-right: 7px;padding-left: 3px;font-size: 11px;" title="ID">
                              <span class="glyphicon glyphicon-flash"></span> {$row.id}
                           </span>
                           {/if}
                           <input type="text" class="form-control input-sm" name="data[values][{$key}][original]" maxlength="255" value="{$row.original}">
                        </div>
                     </div>
                     <div class="col-md-4">
                        <input type="text" class="form-control input-sm" name="data[values][{$key}][description]" maxlength="255" value="{$row.description}">
                     </div>
                     <div class="col-md-4">
                        <input type="text" class="form-control input-sm" name="data[values][{$key}][mapped]" maxlength="255" value="{$row.mapped}">
                     </div>
                     <div class="col-md-1">
                        <div class="btn-group">
                           <a class="btn-sm btn btn-danger" title="{'buttonDeletePhrase'|translate}" data-form-delete>
                              <input class="hidden" type="checkbox" name="data[values][{$key}][delete]">
                              <span class="glyphicon glyphicon-remove"></span>
                           </a>
                        </div>
                     </div>
                  </div>
               {/block}
            </div>
         {/foreach}
      </div>
   </div>
   <script type="application/javascript">
      {block initForm}
      initForm({
         selector: '[data-values=wrap]',
      });
      {/block}
   </script>
</div>
{/block}
