{% extends "base.html" %}

{% block html_tags %}
ng-app="annonApp"
{% endblock %}

{% block head %}
    {{super()}}
    <script src="{{ url_for('static', filename='js/angular.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/ng-infinite-scroll.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/controllers.js') }}"></script>
    <link href="{{ url_for('static', filename='styles/annon-tool.css') }}" rel="stylesheet">
{% endblock %}

{% block title %}
 {{ super() }} - Catalogo
{% endblock %}

{% block body_tags %}
    ng-controller="pictures-list" data-date="{{data['date']}}" data-userid="{{data['userid']}}" {% if data['labelid'] %} data-labelid="{{data['labelid']}}" {% endif %}
{% endblock %}

{% block content_title %}
    <h1 class="page-header">Catalogo</h1>
{% endblock %}
{% block breadcrumb %}
    {% include 'breadcrumb.html' %}
{% endblock %}
{% block content %}

<div class="col-lg-12 col-md-12 col-sm-12">
    <div class="panel panel-default">
        <!-- /.panel-heading -->
        <div class="panel-body">
            <ul class="list-group pictures-list" infinite-scroll="annonLoader.nextPage()"
                infinite-scroll-disabled="annonLoader.busy" infinite-scroll-distance='0'
                infinite-scroll-immediate-check="true">
                {#<li ng-repeat="(id,picture) in annonLoader.pictures">#}
                <li ng-repeat="id in annonLoader.orderedPictures()" ng-init="picture=annonLoader.pictures[id]">

                    <label for="check-{a picture.id a}" class="picture-label-{a picture.label a}" title="label {a picture.label a}">
                        <input id="check-{a picture.id a}" type="checkbox" ng-change="elemChange()" ng-model="selectedCheckboxes[picture.id]" value="">
                        <img ng-src="{{ url_for('static', filename='media/')}}{a picture.path a}" imageonload border="0">
                    </label>

                </li>
            </ul>
        </div>
        <!-- /.panel-body -->
    </div>
</div>

<div class="list-group labels-list panel-etiquetas-flotante">
    {% for label in data['labels'] %}
    <button title="{{label.name}}" class="list-group-item label-{{label.id}}" data-ng-click="showSelected('{{label.id}}')"> {{label.name}} <span class="pull-right text-muted small"><em>{{label.id}}</em></span></button>
    {% endfor %}
</div>


{% endblock %}
{% block scripts %}
    {{super()}}
    <script src="{{ url_for('static', filename='js/shiftkey.js') }}"></script>
{% endblock %}