<% #listItem %>
<tr>
   <td class='uk-text-right'><% story.comments count %></td>
   <td class='uk-width-1-2 av-overflow'>
      <a href='<% story.href %>' title='<% ngettext '{0} request' '{0} requests' <% story.requests %> %>' data-uk-tooltip="{pos: 'top-left'}">
         <% story.abstract %>
      </a>
   </td>
   <td class='uk-text-truncate'><% story.creator %></td>
   <td class='uk-text-truncate' title='<% story.modified short %>' data-uk-tooltip="{pos: 'top-left'}">
      <% story.modified text %>
   </td>
   <td>
      <% //if <% story.status %> is closed then "<i class='uk-text-muted uk-icon-lock'></i>" %>
      <% //if <% story.status %> is public then "<i class='uk-text-muted uk-icon-unlock'></i>" %>
      <% if <% story.status %> is shared then "<i class='uk-text-muted uk-icon-group'></i>" %>
      <% if <% story.status %> is open then "<i class='uk-text-muted uk-icon-globe'></i>" %>
      <% if <% story.tags count %> is 0 then '' else <% story.tags prefix="<i class='uk-text-muted uk-icon-tags' data-uk-tooltip title='" suffix="'></i>" %> %>
   </td>
   <td class='uk-text-nowrap'>
      <% story.link status <% if <% story.status %> is closed then lock else unlock prefix="<i class='uk-icon-" suffix="'></i>" %> %>
      <% story.link mode <% if <% story.mode %> is hidden then eye-slash else eye prefix="<i class='uk-icon-" suffix="'></i>" %> %>
   </td>
   <td class='uk-text-nowrap uk-text-right'>
      <a href='javascript:' data-value="<% story.macro %>" data-text='<% gettext "Press CTRL & C to copy to clipboard." %>' class='av-clipboard-copy'><i class='uk-icon-clipboard'></i></a>
      <% story.link delete "<i class='uk-icon-trash-o'></i>" %>
      <% story.link edit "<i class='uk-icon-pencil'></i>" %>
   </td>
</tr>

<% #links %>
<% if <% story.commentMode %> is open then
   <% if <% site.commentMode %> is enabled then
      <% story.skin Story#links %>
   else
      <% story.skin Story#permalink %>
   %>
else
   <% story.skin Story#permalink %>
%>

<% #tagged %>
<% story.skin Story#preview %>

<% #search %>
<dt><% this.abstract | this.link %></dt>
<dd>Posted <% this.created text %> by <% this.creator %>.</dd>

<% #update %>
<dt><% gettext '{0} {1} {2} {3} on {4} // e.g. “{3 days ago} {admin} {posted} {a story} on {Antville}”' <% story.site.modified text prefix=<strong> suffix=</strong> %> <% story.modifier %> <% if <% story.created %> is <% story.modified %> then <% gettext 'posted // has posted' %> else <% gettext 'updated // has updated' %> %><% if <% story.type %> is Story then <% gettext 'a story // accusative' %> else <% gettext 'a comment // accusative' %> %> <% story.site.title | story.site.link %> %></dt>
<dd><% story.abstract | story.link class='av-concealed-link' %></dd>

<% #embed %>
<div class='uk-margin-bottom'>
   <div class='uk-panel uk-panel-box'>
      <% story.title prefix="<h2 class='uk-panel-title'>" suffix=</h2> %>
      <% story.text | story.format %>
   </div>
   <% story.source %>
</div>

<% #editor %>
<script type='text/javascript'>
   (function () {
      var form = $('#av-story-form');

      if (!window.UIkit.htmleditor || !document.querySelector(form.selector)) {
         return;
      }

      UIkit.plugin('htmleditor', 'antville', {
         init: function (editor) {
            var addAction = function (name, replace, mode) {
               editor.off('action.' + name);
               editor.on('action.' + name, function() {
                  editor[mode == 'replaceLine' ? 'replaceLine' : 'replaceSelection'](replace);
               });
            };

            editor.addButtons({
               file: {
                  title: "<% gettext 'File' %>",
                  label: '<i class="uk-icon-file-o"></i>'
               },
               poll: {
                  title: "<% gettext 'Poll' %>",
                  label: '<i class="uk-icon-bar-chart"></i>'
               }
            });

            addAction('file', "\<% file '$1' %\>");
            addAction('image', "\<% image '$1' %\>");
            addAction('link', "\<% link 'https://' '$1' %\>");
            addAction('poll', "\<% poll '$1' %\>");
         }
      });

      var editor;
      var lastKeyPressed;
      var submitElement;
      var url = '<% site.href backup.js %>';

      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = '<% root.static ../../styles/editor.min.css %>';
      document.head.appendChild(link);

      /* FIXME: Causes “Cannot read property 'replace' of undefined” in htmleditor.js:62
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = '<% root.static ../../scripts/editor.min.js %>';
      document.head.appendChild(script);
      */

      var enableOnBeforeUnload = function () {
         window.onbeforeunload = function (event) {
            var message = "<% gettext 'You are going to discard unsaved content.' %>";
            event.returnValue = message;
            return message;
         };
      };

      var disableOnBeforeUnload = function () {
         window.onbeforeunload = null;
      };

      var update = function () {
         window.onbeforeunload || enableOnBeforeUnload();
         lastKeyPressed = new Date();
      };

      var scheduler = function () {
         var now = new Date();
         if (lastKeyPressed && (now - lastKeyPressed > 1000)) {
            var data = {};
            form.find('input:text').each(function () {
               data[this.id] = $.trim(this.value);
            });
            if (editor) {
               data.text = $.trim(editor.editor.getValue());
            }
            $.post(url, data);
            lastKeyPressed = null;
         }
         setTimeout(scheduler, 100);
      };

      var parse = function (data) {
         var html = $('<div>').html(data);
         var assets = [];
         html.find('[src]').each(function () {
            var url = $(this).attr('src');
            var re = new RegExp('\.(?:gif|jpg|jpeg|png)$', 'i');
            if (url.match(re)) {
               assets.push(url);
            }
            re = new RegExp('^.+://[^/]*(youtube)[^/]+/embed/([^/?]+)', 'i');
            var match = url.match(re);
            if (match) {
               form.append($('<input>').attr({
                  hidden: true,
                  name: 'og:video',
                  value: 'https://' + match[1] + '.com/v/' + match[2]
               }));
               assets.push('https://img.' + match[1] + '.com/vi/' + match[2] + '/0.jpg');
            }
         });

         if (!assets.length) {
            resubmit();
         }

         $.each(assets, function (index, url) {
            var img = new Image;
            img.src = url;

            img.onload = function () {
               form.append($('<input>').attr({
                  hidden: true,
                  name: 'og:image',
                  value: url
               }));
               assets.shift();
               if (!assets.length) {
                  resubmit();
               }
            };

            img.onerror = function () {
               assets.shift();
               if (!assets.length) {
                  resubmit();
               }
            };
         });
      };

      var resubmit = function () {
         // Turn the clicked (or default) submit button into a hidden value to be sure it is submitted again
         var submit = submitElement || form.find(':submit:first');
         submitElement = null;
         form.append($('<input>').attr({
            hidden: true,
            name: submit.name,
            value: submit.value
         })).submit();
      };

      editor = UIkit.htmleditor(document.querySelector('#text'), {
         mode: 'tab',
         markdown: true,
         lblPreview: '<% gettext Preview %>',
         lblCodeview: '<% gettext HTML %>',
         lblMarkedview: '<% gettext Markdown %>',
         toolbar: ['bold', 'italic', 'strike', 'link', 'image', 'file', 'poll', 'blockquote', 'listUl', 'listOl']
      });

      editor.editor.on('keyup', update);

      editor.htmleditor.on('click', '.uk-htmleditor-button-code, .uk-htmleditor-button-preview', function (event) {
         if ($(event.currentTarget).hasClass('uk-htmleditor-button-preview')) {
            // FIXME: Should we really render the macros via AJAX call?
            var raw = encodeURIComponent(editor.editor.getValue());
            $.post('<% stories.href render.json %>', raw)
               .done(function (data) {
                  $('.uk-htmleditor-preview div').html(data);
               });
         }
      });

      form.on('keyup', 'input:text', update)
         .on('click', '.uk-button', disableOnBeforeUnload);

      form
         .on('click', ':submit', function (event) {
            event.preventDefault();
            $(this.form).trigger('submit', this);
         })
         .on('submit', function (event, submit) {
            var form = $(this);
            if (form.data('is-processed')) {
               return;
            }

            event.preventDefault();
            form.data('is-processed', true);
            submitElement = submit;

            var buffer = [];
            form.find(':input, textarea').each(function () {
               buffer.push($(this).val());
            });

            var raw = encodeURIComponent(buffer.join(' '));
            $.post('<% stories.href render.json %>', raw)
               .done(parse);
         });

      // Restore backup text if available and if the editor refers to a new story
      if (location.href.match('/create$') && '<% session.backup %>') {
         $.getJSON(url, function (data) {
            $.each(data, function (key, value) {
               $('#' + key).val(value);
            });
            editor && editor.editor.setValue(data.text);
         });
      }

      scheduler();

      // Work-around for https://github.com/uikit/uikit/issues/1149
      // FIXME: Fix should be available in next release of UIkit.
      setTimeout(function() {
         editor.fit();
      }, 1000);
   })();
</script>

<% #instant %>
<!doctype html>
<html lang='en' prefix='op: http://media.facebook.com/op#'>

<head>
  <meta charset='utf-8'>
  <meta property='op:markup_version' content='v1.0'>
  <meta property='fb:article_style' content='default'>
  <link rel='canonical' href='<% story.href %>'>
</head>

<body>
  <article>
    <header>
      <h1><% story.title default=<% story.created date %> %></h1>
      <time class='op-published' datetime='<% story.created iso %>'>
        <% story.created long %>
      </time>
      <time class='op-modified' dateTime='<% story.modified iso %>'>
        <% story.modified long %>
      </time>
      <address><a><% story.creator %></a></address>
      <p><% param.text %></p>
    </header>
  </article>
</body>

</html>

<% #amp %>
<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title><% param.title %></title>
    <link rel="canonical" href="<% story.href %>" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "author": {
          "@type": "Person",
          "name": "<% story.creator %>"
        },
        "dateModified": "<% story.modified iso %>",
        "datePublished": "<% story.created iso %>",
        "headline": "<% param.title %>",
        "image": {
          "@type": "ImageObject",
          "url": "<% root.href %><% image /ant-icon.png url %>"
        },
        "mainEntityOfPage": "<% story.href %>",
        "publisher": {
          "@type": "Organization",
          "name": "<% site.title %>",
          "logo": {
            "@type": "ImageObject",
            "url": "<% root.href %><% image /ant-icon.png url %>"
          }
        }
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1><% param.title %></h1>
    <% param.text %>
  </body>
</html>
