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

{% block title %}
    {{ album.name }}
{% endblock %}

{% block body %}
<div class="col-lg-12">
    <form action="{{ oneup_uploader_endpoint('gallery') }}" class="dropzone" id="albumDropzone" data-albumId="{{ album.id }}" style="border: 2px dashed #337ab7;">
        <div class="dz-message" data-dz-message style="font-size: 25px; color:#337ab7;"><span>{{ '_ADD_FILES_'|trans({},'admin') }}</span></div>
    </form>
</div>
<div class="row thumbs-list">
    <div class="col-lg-2 col-md-3 col-xs-6 thumb template">
        <div class="thumbnail" href="#">
            <div class="actions" data-id="">
                <a class="glyphicon glyphicon-remove delete-picture" href="#"></a>
                <a data-tags="" class="edit-tags glyphicon glyphicon-pencil" href="#"></a>
            </div>
            <img class="img-responsive" src="">
        </div>
    </div>
    {% for picture in album.pictures %}
        <div id="thumb{{ picture.id }}" class="col-lg-2 col-md-3 col-xs-6 thumb">
            <div class="thumbnail" href="#">
                <div class="actions" data-id="{{ picture.id }}">
                    <a class="glyphicon glyphicon-remove delete-picture" href="#"></a>
                    <a data-tags="{{ picture.getTagsIds() }}" class="edit-tags glyphicon glyphicon-pencil" href="#"></a>
                </div>
                <img class="img-responsive" src="{{ picture.path|files('253_190') }}">
            </div>
        </div>
{#        <div class="row">
            <div class="col-lg-2 col-md-2">
                <a href="#">
                    <a data-tags="{{ picture.getTagsIds() }}" class="thumbnail" href="#">
                    <img class="img-responsive" src="{{ picture.path|files('253_190') }}" alt="">
                    </a>
                </a>
            </div>

            <div class="col-lg-10 col-md-10">
                <h3>{{ picture.getSize() }}</h3>
             #}{#   <h4>Subheading</h4>#}{#
                <p>
                    #}{#<form class="tagsForm edit-image-tags-wrapper" style="overflow: hidden">
                        <input type="hidden" name="id" value="{{ picture.id }}">
                        <input data-tags="{{ picture.getTagsIds() }}" type="text" class="tag-input" name="tags" style="font-size: 19px;" value="" />
                        #}{##}{#<img  class="edit-image-tags" src='<?php echo _CURRENT_THEME_."icons/edit.gif";?>'>
                        <div class="save-loader" style="text-align:center;">
                            <img src='<?php echo _CURRENT_THEME_."icons/loader.gif"; ?>'>
                        </div>#}{##}{#
                        <input type="submit" class="button" value="save">
                    </form>#}{#
                </p>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>#}
    {% endfor %}
</div>
    {{ include("@Admin/base/pagination.html.twig") }}
    <div class="modal fade" id="pictureFormModal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                {{ form_start(form) }}
                <div class="modal-body" style="height:145px;overflow: auto">
                    <input type="hidden" id="image-id" name="image-id">
                    {{ form_row(form.tags) }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ '_CLOSE_'|trans({},'admin') }}</button>
                    <button type="submit" class="btn btn-primary add-images" id="picture_save" name="picture[save]" >{{ '_UPDATE_'|trans({},'admin') }}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}