<html>
  <head>
    <title>Publications</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700&display=swap" rel="stylesheet">
<style>
  html, body {
  margin:0;
  padding:0;
  font-family:'Montserrat';
}

body {
  display:flex;
  flex-direction:column;
  font-size:0.96em;
}

.wrap-container {
  display:flex;
  justify-content:space-around;
}

.wrap {
  width:90%;
  max-width:750px;
}

.wrap-wide {
  width:90%;
  max-width:900px;
}

c {
  color: #2C60E5;
}

/**
 * Links
 **/

p a, span a {
  color:inherit;
  text-underline-position: under;
  text-decoration-color:#ccc;
}

article a {
  text-decoration:none;
  color:#333;
}

span,.button.tight span {
  color:#999;
}

h1 span {
  font-weight:400;
  font-size:0.5em;
  padding-left:0.5em;
}

/**
 * Buttons
 **/

.buttons {
  margin-top:3em;
}

p.buttons {
  margin-top:1em;
}

.button {
  padding:1.1em 1.35em;
  background-color:rgba(0,0,0,0.05);
  border-radius:5px;
  display:inline-block;
  text-transform:uppercase;
  text-decoration:none;
  color:#000;
  font-weight:600;
  letter-spacing:1px;
  font-size:0.9em;
  max-height: 1.35em;
}

.button.tight {
  padding:0.8em;
  font-size:0.7em;
  border:1px solid transparent;
  line-height:100%;
}

span.button.tight {
  border:1px solid #ccc;
  color:#999;
  background-color:transparent;
}

span.button.colored {
  color:#FFF;
  background-color:rgba(204, 153, 0, 1);
  border:1px solid transparent;
}

.button span {
  color:inherit;
}

.button i + span {
  margin-left:0.5em;
}

.button:not(span):hover {
  background-color:rgba(0,0,0,0.1);
}

.button + .button {
  margin-left:0.5em;
}


/**
 * byline
 */

article {
  margin-top:4em;
}

article h2 {
  margin-bottom:0;
}

.byline {
  margin-top:0.75em;
  color:#999;
  font-size:0.9em;
}

article p {
  line-height:150%;
}

article + article {
  margin-top:3em;
}

article .tags {
  margin-left:1em;
}

article h2 a {
  color:#000;
}

/**
 * search
 **/

.search {
  width:100%;
  display:flex;
}

.search input[type="submit"] {
  width:3em;
  font-size:1.5em;
  border:none;
  border-radius:5px;
  color:#999;
  margin-left:0.5em;
}

.search input[type="text"] {
  flex:1;
  border:none;
  padding:1em;
  background-color:#f3f3f3;
  border-radius:5px;
  font-family:inherit;
  font-size:1.25em;
}

.search input::placeholder {
  color:#999;
}

h2 span.small {
  font-size:0.5em;
  line-height:150%;
  margin-top:1em;
  display:inline-block;
}

.papers {
  margin-top:5em;
  margin-bottom:5em;
}
</style>
  </head>
  <body>
    <section class="papers wrap-container" id="papers">
      <div class="wrap">
        <form>
          <div class="search">
            <input id="search-bar" name="s" type="text" placeholder="Search for papers by title and tag">
            <input class="fa" type="submit" value="&rarr;">
          </div>
        </form>
        {% for pub in publications %}
        <article>
          <a href="{{ pub['url'] }}">
            <h2>{{ pub['title'] }}</h2>
            <p class="byline"><span>{{ pub['author'] }}</span></p>
          </a>
          <p>
            {% if pub['journal'] %}<span class="button tight {% if 'arxiv' not in pub['journal'].lower() %}colored{% endif %}">{{ pub['journal'] }} {{ pub['year'] }}</span>{% endif %}
            <a href="{{ pub['url'] }}" class="button tight">Paper</a>
            {% if pub['code'] %}<a href="{{ pub['code'] }}" class="button tight">Code</a>{% endif %}
            <!--<span class="tags"><a href="?s=xai#papers">#xai</a> <a href="?s=nbdt#papers">#nbdt</a></span>--></p>
        </article>
        {% endfor %}
      </div>
    </section>
    <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
    <script>
$('document').ready(function() {
  $('#search-bar').on('input', function(e) {
    var term = $(this).val();
    $('article').show();
    if (term.length > 0) {
      for (var id in id_to_keywords) {
        value = id_to_keywords[id];
        if (!value.toUpperCase().includes(term.toUpperCase())) {
          $('#' + id).hide();
        }
      }
    }
  });

  function createSearchIndex() {
    var id_to_keywords = {};
    $('article').each((i, el) => {
      var id = 'article' + i;
      el = $(el);
      el.attr('id', id);
      keywords = el.find('h2').html() + el.find('.tags a').html();
      id_to_keywords[id] = keywords
    });

    console.log('Populated search index: ');
    console.log(id_to_keywords);
    return id_to_keywords;
  }

  var id_to_keywords = createSearchIndex();

  var urlParams = new URLSearchParams(window.location.search);
  if (urlParams.has('s')) {
    $('#search-bar').val(urlParams.get('s'));
    $('#search-bar').trigger('input');
  }
});
    </script>
  </body>
</html>
