[[ media.forEach(function(media){ ]]
  <div class="media">
    [[ if (media.type == "image") { ]]
      <a class="medialink" href="[[- media.url ]]" target="_blank"><img src="[[- media.url ]]"></a>
    [[ } else { ]]
      <a class="medialink" href="[[- media.url ]]" target="_blank">[[- media.shortUrl ]]</a>
    [[ } ]]
    <br>
    <a href="/staff/media/[[- media._id ]]">[view]</a>
    <a href="/staff/users/[[- media.user.username ]]">[[- media.user.username ]]</a>
    [[- media.date ]]
  </div>
[[ }) ]]
</table>

<style>
.media {
  height: 28vw;
  width: 24vw;
  margin: 1vw;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staff .body a.medialink {
  width: 24vw;
  height: 24vw;
  display: block;
  overflow: hidden;
  color: #00f;
  border: 0;
  text-decoration: underline;
}
.staff .body a.medialink img {
  max-width: 100%;
}
</style>