{% block resources_html %}
<div id="resources">
  <div role="tabpanel">
    <ul class="nav nav-tabs" role="tablist">
      {% for resource in entry.resources %}
      <li role="presentation" class="{{ loop.first ? 'active' : '' }}"><a href="#res_{{ resource.id }}" aria-controls="(1)" role="tab" data-toggle="tab" style="background-image:url({{ asset('bundles/viewers/images/icons/' ~ resource.type.classification ~ '-' ~ resource.type.extension ~ '.png') }})">{{ resource.type.extension|upper }}</a></li>
      {% endfor %}
    </ul>
    <div class="tab-content">
      {% set autoStart = true %}
      {% for resource in entry.resources %}
      <div role="tabpanel" class="tab-pane {{ loop.first ? 'active' : '' }}" id="res_{{ resource.id }}">
        <div class="viewer-wpr" style="max-width:{{ resource.type.viewerWidth }}px;">
          {% set options = {} %}
          {% if resource.type.classification == 'audio' or resource.type.classification == 'video' %}
          {% set ratio = resource.type.classification == 'audio' ? '16:3' : '16:9'  %}
          {% set options = { 'autostart': autoStart, 'poster': path('entry_poster', { 'type_name': entry.type.name, 'local_id': entry.localId, 'ratio': ratio }) } %}
          {% set autoStart = false %}
          {% endif %}
          {% if resource.properties %}
          {% set options = options|merge(resource.properties) %}
          {% endif %}
          {{ render(controller('ViewersBundle:Viewers:default', { 'type': resource.type.classification ~ '-' ~ resource.type.extension, 'url': attribute(content_conf, entry.type.name).view_host ~ resource.path, 'options': options })) }}
        </div>
        <ul class="resource-actions list-inline text-{{ 'commons.language.ralign'|trans }}">
          <li><a class="download" data-resource-id="{{ resource.id }}" href="{{ attribute(content_conf, entry.type.name).download_host ~ resource.path }}">{{ 'Download'|trans }}</a></li>
          {% if resource.type.embeddable %}
          <li><a class="embed" href="#">{{ 'Embed'|trans }}</a></li>
          {% endif %}
        </ul>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}