{% import "helpers.html.twig" as helpers %}

{% extends '@Admin/base.html.twig' %}

{% block title %}
    <a href="{{ path('list_programs') }}" title="{{ '_PROGRAMS_'|trans({},'admin') }}" class="name">{{ '_PROGRAMS_'|trans({},'admin') }}</a>
    >> 
    {{programsname.getName()}}
    <span style="display: block;
    text-align: left;
    margin-top: -30px;"><a href="{{ url('admin') }}/programs/videos/new/{{ programId }}" class="btn btn-primary btn-sm">{{ '_NEW_VIDEO_'|trans({},'admin') }}</a>
    </span>
{% endblock %}

{% block body %}
    {# <div class="programsnameadmin">
        <div class="lefttable">
            <a href="{{ path('list_programs') }}" title="{{ '_PROGRAMS_'|trans({},'admin') }}" class="name">{{ '_PROGRAMS_'|trans({},'admin') }}</a>
        </div>
        <div class="righttable">
            {{programsname.getName()}}
        </div>
    </div> #}
    
    <div class="row">
        {{ form_start(form) }}
        <div class="col-lg-3">{{form_row(form.name)}}</div> 
        <div class="col-lg-3">{{form_row(form.from)}}</div>
        <div class="col-lg-3">{{form_row(form.to)}}</div>
        <div class="col-lg-3" style="margin-top: 23px;">{{form_row(form.save)}}</div>
        {{form_end(form)}}
    </div>
           
{# <ul class="list-unstyled video-list-thumbs row">
   {% for video in programVideos %}
    <li class="col-lg-2 col-sm-4 col-xs-6">
        <a href="{{ path('edit_video', {id: video.programId, videoId: video.id}) }}" class="{{ video.displayStatus() }}" title="{{ video.getTitle() }}">
            <img src="{{ video.getDisplayedPicture("") }}" alt="Barca" class="img-responsive" width="209px" height="118px" />
            <h2>{{ video.getTitle() }}</h2>
            <div>{{ video.getCreateDate()|date('y-m-d h:i:s') }}</div>
            <span class="glyphicon glyphicon-play-circle"></span>

        </a>
    </li>
    {% endfor %}
</ul> #}
<div class="table-responsive">
        <table id="mytable" class="table table-bordred table-striped">
            <thead>
            <tr>
                <th>Id</th>
                <th>{{ '_TITLE_'|trans({},'admin') }}</th>
               <th>{{ 'IMAGE'|trans({},'admin') }}</th>
               <th>الفيديو</th>
                <th>{{ '_DATE_'|trans({},'admin') }}</th>
                <th>{{ '_STATUS_'|trans({},'admin') }}</th>
                <th>{{ '_EDIT_'|trans({},'admin') }}</th>
            </tr>
            </thead>
            <tbody>
                {% for video in programVideos %}
                    <tr>
                        <td>{{video.getId()}}</td>
                    <td>{{ video.getTitle() }}</td>
                    <td><img src="{{ video.getDisplayedPicture("") }}" alt="Barca" class="img-responsive" width="100px"/></td>
                    <td><a href="https://www.youtube.com/watch?v={{video.videoId}}" target="_blank"><img src="https://img.youtube.com/vi/{{video.videoId}}/default.jpg" alt=""><span class="glyphicon glyphicon-play-circle"></span></a></td>
                    <td>{{ video.getCreateDate()|date('y-m-d h:i:s') }}</td>
                    <td ><span class="flag flag-{{ video.displayStatus() }}" title="{{ video.displayStatus() }}"></span></td>
                    <td><a class="btn btn-primary btn-xs" href="{{ path('edit_video', {id: video.programId, videoId: video.id}) }}" title="{{ video.getTitle() }}"><span class="glyphicon glyphicon-pencil"></span></a></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <nav aria-label="Page navigation" class="text-center">
        {{ knp_pagination_render(programVideos) }}
    </nav>
{% endblock %}