<!doctype html>
<html lang="en">
  <head>
    <title>FemslashCity</title>

    <%== erb :'_meta' %>

    <% if meta_robots %>
      <meta name="robots" content="<%= meta_robots %>">
    <% end %>

    <link href="/css/neo.css" rel="stylesheet" type="text/css" media="all">

    <% if @dont_browser_cache %>
      <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
      <meta http-equiv="Pragma" content="no-cache">
      <meta http-equiv="Expires" content="0">
    <% end %>

    <script src="/js/jquery-1.11.0.min.js"></script>

    <script src="/js/highlight/highlight.min.js"></script>
    <link rel="stylesheet" href="/css/highlight/styles/tomorrow-night.css">
    <script>
      hljs.highlightAll()

      document.addEventListener('DOMContentLoaded', function() {
        var eventDateElements = document.querySelectorAll('.local-date-title');
        eventDateElements.forEach(function(element) {
          var timestamp = element.getAttribute('data-timestamp');
          var date = dayjs.unix(timestamp);
          var formattedDate = date.format('MMMM D, YYYY [at] h:mm A');
          element.title = formattedDate;
        });
      });
    </script>
  </head>

  <body class="interior">
    <div class="page">
      <%== erb :'_header', layout: false %>
      <%== flash_display %>
      <%== yield %>
    </div>
    <footer class="footer-Base">
      <%== erb :'_footer', layout: false %>
    </footer>

    <script src="/js/underscore-min.js"></script>
    <script src="/js/nav.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/typeahead.bundle.js"></script>
    <script src="/js/dayjs.min.js"></script>
    
    <script>
      $("a#like").tooltip({html: true})
      $("a.comment_like").tooltip({html: true})
      $('#shareButton').popover({html: true})
      $('#tipButton').popover({html: true})

      $('.typeahead').typeahead({
        minLength: 2,
        highlight: true
      }, {
        name: 'tags',
        source: function(query, callback) {
          $.get('/tags/autocomplete/'+query+'.json', function(data) {
            var suggestions = JSON.parse(data)
            var suggestionObjects = []
            for(var i=0; i<suggestions.length; i++)
              suggestionObjects.push({value: suggestions[i]})

            callback(suggestionObjects)
          })
        }
      }).on('typeahead:selected', function(e) {
        e.target.form.submit()
      })
    </script>
  </body>
</html>
