{% set layout = "ClarolineCoreBundle:Workspace:layout.html.twig" %}

{% if isDesktop() %}
    {% set layout = "ClarolineCoreBundle:Desktop:layout.html.twig" %}
{% endif %}

{% extends layout %}

{% set tag = 'video' %}
{% set source = path ('claro_stream_video', {'node': video.getResourceNode().getId(), 'name': video.getResourceNode().getName()}) %}
{% set mediaFlash = asset('bundles/frontend/mediaelement/build/flashmediaelement.swf') %}

{% if "audio" in video.getResourceNode().getMimeType() %}
    {% set tag = 'audio' %}
{% endif %}

{% block title %}{{ video.getResourceNode().getName() ~ ' - ' ~ parent() | striptags | raw }}{% endblock %}

{% block section_content %}
    <div class="panel-heading">
        <h3 class="panel-title">{{ video.getResourceNode().getName() }}</h3>
    </div>
    <div class="panel-body">
        <{{ tag }} controls="controls" width="540" height="273" preload="none" style="background:#000;max-width:100%">
            <source type="{{ video.getResourceNode().getMimeType() }}" src="{{ source }}">
            <object class="flashplayer" type="application/x-shockwave-flash" data="{{ mediaFlash }}">
                <param name="movie" value="{{ mediaFlash }}" />
                <param name="flashvars" value="controls=true&file={{ source }}" />
            </object>
        </{{ tag }}>
    </div>
    <div class="panel-footer">
        <a class="btn btn-primary" href="{{ path('claro_resource_download') }}?ids[]={{ video.getResourceNode().getId() }}">
            <i class="fa fa-download"></i> {{ 'download'|trans({}, 'platform') }}
        </a>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('bundles/frontend/mediaelement/build/mediaelementplayer.min.css') }}" />
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('bundles/frontend/mediaelement/build/mediaelement-and-player.min.js') }}"></script>
    <script>
        $('audio,video').mediaelementplayer();
    </script>
{% endblock %}