{% extends "::admin.html.twig"%}
{% block title %}PAFCIC-Online {% endblock %}

{% block body %}


<section id="page-title" style="padding: 16px 0;">
  <div class="row">
    <div class="col-sm-8">
      <h2 class="mainTitle"><i class="ti-image" style="color: #007aff !important;font-size: 24px;"></i> Media </h2>
    {#<button type="button" class="btn btn-primary btn-scroll btn-scroll-top ti-arrow-right" data-toggle="modal" data-target=".bs-example-modal-right">#}
                                {#<span>Upload Image</span>#}
                        {#</button>#}
    </div>
    <ol class="breadcrumb" style="margin: 0px 0 0 !important;">
      <li>
        <span>Media</span>
      </li>
      <li class="active">
        <span>List</span>
      </li>
    </ol>
  </div>
</section>
<div class="container-fluid container-fullw ">
    <div class="row">
        <div class="col-sm-12 col-md-12">

            <ul id="myTab1" class="nav nav-tabs">
                <li class="active">
                    <a href="#myTab1_example1" data-toggle="tab" aria-expanded="true">
                        Images
                    </a>
                </li>
                <li class="">
                    <a href="#myTab1_example2" data-toggle="tab" aria-expanded="false">
                        Video
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade active in" id="myTab1_example1">
                    {#<button type="button" class="btn btn-primary btn-scroll btn-scroll-top ti-arrow-right" data-toggle="modal" data-target=".bs-example-modal-right">#}
                        {#<span>Upload Image</span>#}
                    {#</button>#}
                    <hr>
                    <div class="panel panel-transparent">

                        <div class="panel-body">
                            <div class="row">

                                {% for entitie in entities %}
                                    <div class="col-sm-6 col-md-3" >
                                        <div class="thumbnail" >
                                            <img src="{{ asset(entitie.webPath)}}" style="min-height: 123px;max-height: 123px;" alt="">
                                            <div class="caption" style="">
                                                <p alt="{{entitie.alt}}" class="" style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" >{{entitie.alt}}</p>
                                                <a href="#" onclick='confirme("{{path('media_author_delete', { 'id': entitie.id })}}","{{entitie.alt}}");return false;' class="pull-right"><i class="ti-trash"></i></a>
                                                {#<a href="#" class="pull-right" title="" data-toggle="popover" data-placement="top" data-html="true" data-content="<div class='padding-10 text-center'><h3>Copy Link</h3><p style='font-size: 11px;margin-left: -18px;color: #1A87FF;'>{{ app.request.getSchemeAndHttpHost() }}/PafcicOnline/web/{{entitie.webPath}}</p></div>" >#}
                                                {#<i class="ti-link"></i>#}
                                                {#</a>#}
                                            </div>
                                            <div class="clear-fix"></div><br/>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="navigation">
                        {{ knp_pagination_render(entities) }}
                    </div>

                </div>
                <div class="tab-pane fade" id="myTab1_example2">
                    {#<button type="button" class="btn btn-primary btn-scroll btn-scroll-top ti-arrow-right" data-toggle="modal" data-target=".bs-example-modal-right-video">#}
                        {#<span>Upload Video</span>#}
                    {#</button>#}
                    <hr>
                    <div class="panel panel-transparent">

                        <div class="panel-body">
                            <div class="row">

                                {% for entitie in entities_video %}
                                    <div class="col-sm-6 col-md-3" >
                                        <div class="thumbnail" >
                                            <video height="120px">
                                                <source src="{{ asset(entitie.webPath)}}" >
                                            </video>
                                            <div class="caption" style="">
                                                <p alt="{{entitie.alt}}" class="" style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" >{{entitie.alt}}</p>
                                                <a href="#" onclick='confirme("{{path('media_author_delete', { 'id': entitie.id })}}","{{entitie.alt}}");return false;' class="pull-right"><i class="ti-trash"></i></a>
                                                {#<a href="#" class="pull-right" title="" data-toggle="popover" data-placement="top" data-html="true" data-content="<div class='padding-10 text-center'><h3>Copy Link</h3><p style='font-size: 11px;margin-left: -18px;color: #1A87FF;'>{{ app.request.getSchemeAndHttpHost() }}/PafcicOnline/web/{{entitie.webPath}}</p></div>" >#}
                                                {#<i class="ti-link"></i>#}
                                                {#</a>#}
                                            </div>
                                            <div class="clear-fix"></div><br/>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="navigation">
                        {{ knp_pagination_render(entities_video) }}
                    </div>
                </div>

            </div>


        </div>
    </div>
</div>


<!-- Right Aside -->
<!-- /Right Aside -->
{% endblock %}