<!doctype blah>
<html>
<head>
  <title>fpaste</title>
  <link rel="stylesheet" type="text/css" href="/css/jquery-ui.min.css" />
  <link rel="stylesheet" type="text/css" href="/css/main.css" />
  <link rel="stylesheet" type="text/css" href="/css/notifications.css" />
  <link rel="stylesheet" type="text/css" href="/css/code.css" />
  <link rel="stylesheet" type="text/css" href="/css/view.css" />
  <link rel="stylesheet" type="text/css" href="/css/index.css" />
  <link rel="stylesheet" type="text/css" href="/css/fonts.css" />
  <link rel="stylesheet" type="text/css" href="/css/user.css" />
</head>
<body>
<header>
  <p id="left"><a id="n3" href="/a">f&nbsp;<sup>3,5</sup></a>paste.cc</p><p id="center">::</p><p id="right">Pudding</p>
  <p id="info">a javascript pastebin</p>
</header>
<menu>
  <li class="highlight"><a href="/">New paste</a></li>
  <li class="highlight"><a href="/v">View pastes</a></li>
  <li><hr></li>
  <li class="highlight"><a href="/u">Login</a>
    <ul class="submenu hidden">
      <li><a href="/u/register">Register</a></li>
      <li><a href="/u/lost-password">Password lost</a></li>
    </ul>
  </li>
  <li><hr></li>
  <li class="highlight"><a href="/a">About</a>
    <ul class="submenu hidden">
      <li><a href="/a/howto">How to</a></li>
      <li><a href="/a/contact">Contact</a></li>
      <li><a href="/a/statistics">Statistics</a></li>
    </ul>
  </li>
</menu>
<section id="notifications">{{notification}}</section>
<section id="main">
  {{{body}}}
</section>

<script type="text/javascript" src="/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="/js/jquery.timeago.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
<script>
  $(document).ready(() => {
    let s = $.timeago.settings;
    let str = s.strings;
    s.refreshMillis = 1000;
    s.allowFuture = true;
    s.localeTitle = true;
    str.seconds = "%d seconds";
    str.minute = "1 minute";
    str.hour = "1 hour";
    str.hours = "%d hours";
    str.day = "1 day";
    str.month = "1 month";
    str.year = "1 year";
    str.suffixFromNow = null;
    $("time.timeago").timeago();

    $.widget("custom.combobox", {
      _create: function() {
        this.wrapper = $("<span>")
          .addClass("custom-combobox")
          .insertAfter(this.element);
        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
      },
      _createAutocomplete: function() {
        var selected = this.element.children(":selected"),
            value = selected.val() ? selected.text() : "";
        this.input = $("<input>")
          .appendTo(this.wrapper)
          .val(value)
          .attr("title", "")
          .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
          .autocomplete({
            delay: 0,
            minLength: 0,
            source: $.proxy(this, "_source")
          })
          .tooltip({
            classes: {
              "ui-tooltip": "ui-state-highlight"
            }
          });
        this._on(this.input, {
          autocompleteselect: function(event, ui) {
            ui.item.option.selected = true;
            this._trigger("select", event, {
              item: ui.item.option
            });
          },
          autocompletechange: "_removeIfInvalid"
        });
      },
      _createShowAllButton: function() {
        var input = this.input,
          wasOpen = false;
        $("<a>")
          .attr("tabIndex", -1)
          .attr("title", "Show All Items")
          .tooltip()
          .appendTo(this.wrapper)
          .button({
            icons: {
              primary: "ui-icon-triangle-1-s"
            },
            text: false
          })
          .removeClass("ui-corner-all")
          .addClass("custom-combobox-toggle ui-corner-right")
          .on("mousedown", function() {
            wasOpen = input.autocomplete("widget").is(":visible");
          })
          .on("click", function() {
            input.trigger("focus");
            if (wasOpen) return;
            input.autocomplete("search", "");
          });
      },
      _source: function(request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        response(this.element.children("option").map(function() {
          var text = $(this).text();
          if (this.value && (!request.term || matcher.test(text)))
            return {
              label: text,
              value: text,
              option: this
            };
        }));
      },
      _removeIfInvalid: function(event, ui) {
        if (ui.item) return;
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children("option").each(function() {
          if ($(this).text().toLowerCase() === valueLowerCase) {
            this.selected = valid = true;
            return false;
          }
        });
        if (valid) return;
        this.input
          .val("")
          .attr("title", value + " didn't match any item")
          .tooltip("open");
        this.element.val("");
        this._delay(function() {
          this.input.tooltip("close").attr("title", "");
        }, 2500);
        this.input.autocomplete("instance").term = "";
      },
      _destroy: function() {
        this.wrapper.remove();
        this.element.show();
      }
    });
    $("#lang").combobox();
    $("#toggle").on("click", function() {
      $("#lang").toggle();
    });
  });
  </script>
</body>
</html>