{% extends "layout.html" %}
{% block headers %}
<style>
#portal-summary { padding: .5em .5em .5em 0em; text-align: center; margin: 0 auto; }
.portal-summary-item { text-align: center; width: 100%; }
.portal-summary-item-left {
    display: inline-block;
    min-width: 275pt;
    text-align: right;
    font-size: 2em;
    font-family: 'FiraMono', monospace;
    padding: .1em .5em .1em 0em;
    border-right: solid 2pt #ccc;
}
.portal-summary-item-right { display: inline-block; min-width: 275pt; text-align: left; padding-left: 1em; }
.tiles-wrapper { margin: auto auto 1em auto; min-width: 852pt; text-align: center; user-select: none; }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0pt; padding: 0pt; }
.tiles li {
    display: inline-block;
    margin: .5em .8em .5em 0em;
    overflow: hidden;
    border: none;
    border-radius: 4pt;
    border: solid 1pt #ccc;
}
.tiles li:nth-child(1), .tiles li:nth-child(2), .tiles li:nth-child(3), .tiles li:nth-child(4), .tiles li:nth-child(5) { margin-top: 1em; }
.tiles li:nth-child(5), .tiles li:nth-child(10), .tiles li:nth-child(15), .tiles li:nth-child(20) { margin-right: 0pt; }
.tiles li .tile { display: block; overflow: hidden; height: 160pt; }
.tiles li .institute-tile { display: block; overflow: hidden; height: 100pt !important; }
.tile-row-image {
    margin: 0pt;
    padding: 0pt;
    width: 160pt;
    max-width: 160pt;
}
.tile-row-text a { text-decoration: none; font-size: 13pt }
.tile-row-text {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    height: 50pt;
    max-height: 50pt;
    width: 160pt;
    max-width: 160pt;
    text-align: center;
}
.tiles .tile:hover { opacity: 0.9; cursor: pointer; }
.institute-tile:first { margin-left: 0pt; }
.institute-tile:hover { opacity: 0.5 !important; cursor: pointer; }
.institute-tile img { width: 145pt; }
.h1-suffix {
  display: inline-block;
  border-radius: .5em;
  padding: .1em .4em .1em .4em;
  font-size: 14pt;
  transform: translate(12%, -12%);
}
#new-notice { margin-top: 0em; }
</style>
{% endblock %}
{% block body %}
{%- if notice_message %}
<div id="new-notice" class="notice-box"><p>{{notice_message|safe}}</p></div>
{%- endif %}
{%- if show_portal_summary %}
<h1 class="corporate-identity-h1">Summary</h1>
<div id="portal-summary">
{%- for item in ["datasets", "authors", "collections", "files", "bytes"]: %}
<div class="portal-summary-item">
  <div class="portal-summary-item-left">{{summary_data[item]}}</div><!--
--><div class="portal-summary-item-right">{{item}}</div>
</div>
{%- endfor %}
</div>
{%- endif %}

{%- if show_institutions %}
<h1 class="corporate-identity-h1">Institutions</h1>
<div class="tiles-wrapper">
  <ul class="tiles">
    <li>
      <div class="tile institute-tile">
        <div class="tile-row-image">
          <a href="/institutions/Delft_University_of_Technology"><img src="/static/images/portal/tudelft.jpg" alt="TU Delft"></a>
        </div>
      </div>
    </li>
    <li>
      <div class="tile institute-tile">
        <div class="tile-row-image">
          <a href="/institutions/University_of_Twente"><img src="/static/images/portal/utwente.jpg" alt="UTwente"></a>
        </div>
      </div>
    </li>
    <li>
      <div class="tile institute-tile">
        <div class="tile-row-image">
          <a href="/institutions/Eindhoven_University_of_Technology"><img src="/static/images/portal/tueindhoven.jpg" alt="TU Eindhoven"></a>
        </div>
      </div>
    </li>
    <li>
      <div class="tile institute-tile">
        <div class="tile-row-image">
          <a href="/institutions/Wageningen_University_and_Research"><img src="/static/images/portal/wageningen.jpg" alt="Wageningen"></a>
        </div>
      </div>
    </li>
    <li>
      <div class="tile institute-tile">
        <div class="tile-row-image">
          <a href="/institutions/Other_institutions"><img src="/static/images/portal/other-institutions.jpg" alt="Other institutions"></a>
        </div>
      </div>
    </li>
  </ul>
</div>
{%- endif %}

{%- if show_science_categories %}
<h1 class="corporate-identity-h1">Subjects <span class="h1-suffix"><a href="/category">All</a></span></h1>
<div class="tiles-wrapper">
  <ul class="tiles">
    <li>
      <div class="tile">
        <div class="tile-row-image">
          <a href="/categories/13431" aria-hidden="true" tabindex="-1">
            <img src="/static/images/portal/mathematics.jpg" alt="Image for Mathematics">
          </a>
        </div>
        <div class="tile-row-text"><a href="/categories/13431">Mathematics</a></div>
      </div>
    </li>
    <li>
      <div class="tile">
        <div class="tile-row-image">
          <a href="/categories/13603" aria-hidden="true" tabindex="-1">
            <img src="/static/images/portal/physics.jpg" alt="Image for Physics">
          </a>
        </div>
        <div class="tile-row-text">
          <a href="/categories/13603">Physics</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13594" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/chemistry.jpg" alt="Image for Chemistry">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13594">Chemistry</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13551" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/earth-sciences.jpg" alt="Image for Earth Sciences">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13551">Earth Sciences</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13551?categories=13552" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/atmospheric-sciences.jpg" alt="Image for Atmospheric Sciences">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13551?categories=13552">Atmospheric Sciences</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13551?categories=13557" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/physical-geography-and-environmental-geoscience.jpg" alt="Image for Physical Geography and Environmental Geoscience">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13551?categories=13557">Physical Geography And Environmental Geoscience</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13630?categories=13639" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/geomatic-engineering.jpg" alt="Image for Geomatic Engineering">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13630?categories=13639">Geomatic Engineering</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13410" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/environmental-sciences.jpg" alt="Image for Environmental Sciences">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13410">Environmental Sciences</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13578" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/biology.jpg" alt="Image for Biology">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13578">Biology</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13376" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/agricultural-and-veterinary-sciences.jpg" alt="Image for Agricultural and Veterinary Sciences">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13376">Agricultural And Veterinary Sciences</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13611" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/information-and-computing-sciences.jpg" alt="Image for Information and Computing Sciences">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13611">Information And Computing Sciences</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13652?categories=13659" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/nanotechnology.jpg" alt="Image for Nanotechnology">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13652?categories=13659">Nanotechnology</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13630?categories=13631" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/aerospace-engineering.jpg" alt="Image for Aerospace Engineering">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13630?categories=13631">Aerospace Engineering</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13630?categories=13635" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/civil-engineering.jpg" alt="Image for Civil Engineering">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13630?categories=13635">Civil Engineering</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13630?categories=13636" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/electrical-and-electronic-engineering.jpg" alt="Image for Electrical and Electronic Engineering">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13630?categories=13636">Electrical And Electronic Engineering</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13362" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/built-environment-and-design.jpg" alt="Image for Built Environment and Design">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13362">Built Environment And Design</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13630?categories=13642" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/materials-engineering.jpg" alt="Image for Materials Engineering">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13630?categories=13642">Materials Engineering</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13630?categories=13643" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/mechanical-engineering.jpg" alt="Image for Mechanical Engineering">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13630?categories=13643">Mechanical Engineering</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13474" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/medical-and-health-sciences.jpg" alt="Image for Medical and Health Sciences">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13474">Medical And Health Sciences</a>
</div>
</div>
</li>
<li>
  <div class="tile">
    <div class="tile-row-image">
      <a href="/categories/13500?categories=13503" aria-hidden="true" tabindex="-1">
        <img src="/static/images/portal/business-and-management.jpg" alt="Image for Business and Management">
      </a>
    </div>
    <div class="tile-row-text">
      <a href="/categories/13500?categories=13503">Business And Management</a>
</div>
</div>
</li>
</ul>
</div>
{%- endif %}

{%- if show_latest_datasets %}
<h1 class="corporate-identity-h1">Latest datasets <span class="h1-suffix"><a href="/search">All</a></span></h1>
<div id="latest-datasets">
  <ul>
    {%- for (url,title,pub_date,authors) in latest %}
      <li>
        <div class="latest-item">
          <div class="latest-title"><a class="corporate-identity" href="{{url}}" title="Published {{pub_date}}"><strong>{{title}}</strong></a></div>
          <div class="authors">
            {%- for author in authors %}
            {{author.full_name}}
            {%- if loop.revindex0 %}, {%- endif %}
            {%- endfor %}
          </div>
        </div>
      </li>
    {%- endfor %}
  </ul>
</div>
{%- endif %}
{% endblock %}
