{% extends "::author.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>
    </div>
  </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>


<!-- Right Aside -->
<div class="modal fade modal-aside horizontal right bs-example-modal-right"  tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog modal-sm">
                <div class="modal-content">
                        <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel">Upload Image</h4>
                        </div>
                     <form method="post" {{form_enctype(form)}}>
                        <div class="modal-body">
                              <div class="padding-30">
                                    <h2 class="StepTitle"><i class="ti-face-smile fa-2x text-primary block margin-bottom-10"></i> You must select a file</h2>
                                     <div id="form_body" class="form-group">
                                     {% include 'PafcicOnlinePafcicBundle:Media:form.html.twig' %}
                                    </div>  
                                    <p>this feature it allows you to upload images.</p>
                                   </div>
                        </div>
                        <div class="modal-footer">
                                <button type="button" class="btn btn-primary btn-o" data-dismiss="modal">
                                        Close
                                </button>
                                <button type="submit" class="btn btn-primary">
                                        Save 
                                </button>
                        </div>
                         {{ form_rest(form) }}
                     </form>
                </div>
        </div>
</div>
<!-- /Right Aside --><div class="modal fade modal-aside horizontal right bs-example-modal-right-video"  tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Upload Video</h4>
                </div>
                <form method="post" {{form_enctype(form_v)}}>
                    <div class="modal-body">
                        <div class="padding-30">
                            <h2 class="StepTitle"><i class="ti-face-smile fa-2x text-primary block margin-bottom-10"></i> You must select a file</h2>
                            <div id="form_body" class="form-group">
                                {{ form_widget(form_v.file, { 'attr': {'required':true, 'accept':'.mp4,.avi'} }) }}
                            </div>
                            <div id="form_body" class="form-group">
                                {{ form_widget(form_v.alt, { 'attr': {'required':true} }) }}
                            </div>
                            <p>this feature it allows you to upload video.</p>
                        </div>
                    </div>
                    <input type="hidden" name="ftype" value="video"/>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary btn-o" data-dismiss="modal">
                            Close
                        </button>
                        <button type="submit" class="btn btn-primary">
                            Save
                        </button>
                    </div>
                    {{ form_rest(form) }}
                </form>
            </div>
        </div>
    </div>
{% endblock %}