{% extends "layout.html" %}
{% block headers %}
<style>
.tile-item {
    display: inline-block;
    margin: 0pt 10pt 10pt 0pt;
    padding: 10pt;
    width: 135pt;
    border-radius: 10pt;
    cursor: pointer;
    background: #f9f9f9;
}
.tile-item:hover { background: #eeeeee; }
.tile-item:active { background: #e9e9e9; }
.tile-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 150pt;
    height: 4em;
    font-size: 1.3em;
    font-weight: bold;
}
.tile-preview {
    overflow: hidden;
    width: 100%;
    height: 130pt;
    margin: 0 auto;
    user-select: none;
}
.tile-title a:hover { color: #df7e0e; }
.subcategories { text-align: center; }
.subcategories li { display: inline-block; list-style: none; }
.subcategories li button {
    margin: 5pt;
    padding: 10pt;
    border-radius: 5pt;
    background: #f9f9f9;
    cursor: pointer;
    text-decoration: none;
    border: none;
}
.subcategories li button:hover { background: #eeeeee; }
.subcategories li button:active { background: #e9e9e9; }
.more a { font-size: 1.10em; color: #f49120; }
.more a:hover { color: #df7e0e; }
</style>
{% endblock %}
{% block body %}
<h1>Overview of 4TU.ResearchData</h1>
{% for category in categories: %}
<h2>{{category.title}}</h2>
{% for item in category.articles: %}
<div class="tile-item">
  <a href="/datasets/{{item.container_uuid}}">{% if item.thumb | length: %}
  <img class="tile-preview" src="{{item.thumb}}" aria-hidden="true" alt="thumbnail for {{item.container_uuid}}" />
  {% else: %}
  <img class="tile-preview" src="/static/images/dataset-thumb.svg" aria-hidden="true" alt="thumbnail for {{item.container_uuid}}" />
  {% endif %}</a>
  <div class="tile-title"><a href="/datasets/{{item.container_uuid}}">{{item.title}}</a></div>
  <div class="tile-date">Posted on {{item.timeline_posted | truncate(10,False,'')}}</div>
  <div class="tile-authors">
  </div>
</div>
{% endfor %}
<p class="more"><a href="/categories/{{category.id}}">View all datasets of {{category.title}} &rarr;</a></p>
{% endfor %}
{% endblock %}
