{extends 'base.tpl'}

{block body}
   <div class="container">
      {if $typeTestEmail}
         <form action="launch.php" method="get" target="_self" style="margin-top: 10px;">
            <input type="hidden" name="s" value="emails.php" />
            <input type="hidden" name="acn" value="test" />
            <input type="hidden" name="type" value="{$type}" />
            <input type="hidden" name="entityID" value="{$entityID}" />
            <input type="hidden" name="order_message" value="{$order_message}" />
            {block searchbox}
            <div class="form-search search-only">
               <i class="search-icon glyphicon glyphicon-search"></i>
               {if $typeTestEmail!='orders'}
                  <input type="text" class="form-control search-query" name="search-{$typeTestEmail}" id="search-{$typeTestEmail}" style="width: 100%;" placeholder=" {"select_{$typeTestEmail}"|translate:emails}">
               {else}
                  <input type="text" class="form-control search-query" name="search-order" id="search-order" style="width: 100%;" placeholder="Vybrat objednávku">
               {/if}
            </div>
            {/block}
         </form>
      {/if}
      {if $email.subject}<h1 style="font-size:16px;">{$email.subject}</h1>{/if}
   </div>

   <div id="emailPreview"></div>

   <script>
      {if $typeTestEmail == 'orders'}
         $('#search-order').adminOrderAutoComplete({
            select: function (e, data) {
               const $form = $(this).closest('form');
               const item = data.data.items[data.item.data('autocomplete-item')];
               $form.find('input[name="entityID"]').val(item.id);
               $form.submit();
            }
         });
      {else}
         $("#search-{$typeTestEmail}").adminAutoComplete({
            type:   "{$typeTestEmail}",
            {literal}
              subtemplates: {
                 menuItem: '<div tabindex="-1" data-autocomplete-item="{{=index}}">' +
                        '<p>{{=item.value}}: {{=item.text}}</p>' +
                        '{{#def.buttons}}' +
                        '</div>' +
                        '{{#def.bottom}}',
              },
              {/literal}

            select: function (e, data) {
               const $form = $(this).closest('form');
               const item = data.data.items[data.item.data('autocomplete-item')];
               $form.find('input[name="entityID"]').val(item.id);
               $form.submit();
            }
         });
      {/if}

      const shadow = $('#emailPreview')[0].attachShadow({ mode: 'closed' });
      shadow.innerHTML = "{$email.body|escape:javascript nofilter}";
   </script>
{/block}