{% extends "webgallery/base/base.html" %}

{% block title %}
    OMERO.web Gallery
{% endblock %}


{% block body %}

<h1>{{ group.name }}</h1>

<hr />

<div class="row">

    {% for p in projects %}
    <div class="col-md-4">
        <h2>{{ p.name }}</h2>
        <p class="pull-left">
            {% if p.image %}
            <a href="{% url 'webgallery_show_project' p.id %}">
                <img class="img-thumbnail" title="{{ p.image.name }}" style="width:96px; height:96px" 
                src="{% url 'webgateway.views.render_thumbnail' p.image.id 96 %}"/>
            </a>
            {% endif %}
        </p>
        <div class="pull-left">
            <ul>
                <li>Datasets: {{ p.datasetCount }}</li>
                <li>Images: {{ p.imageCount }}</li>
            </ul>
            <div class="clearfix"></div>
            <p style="margin-left:20px">
                <a class="btn btn-default" href="{% url 'webgallery_show_project' p.id %}" role="button">View details &raquo;</a>
            </p>
        </div>
        <div class="clearfix"></div>
    </div>
    {% endfor %}
</div>

<hr/>

<div class="row">
    {% for p in datasets %}
    <div class="col-md-4">
        <h2>{{ p.name }}</h2>
        <p class="pull-left">
            {% if p.image %}
            <a href="{% url 'webgallery_show_dataset' p.id %}">
                <img class="img-thumbnail" title="{{ p.image.name }}" style="width:96px; height:96px" 
                src="{% url 'webgateway.views.render_thumbnail' p.image.id 96 %}"/>
            </a>
            {% endif %}
        </p>
        <div class="pull-left">
            <ul>
                <li>Images: {{ p.imageCount }}</li>
            </ul>
            <div class="clearfix"></div>
            <p style="margin-left:20px">
                <a class="btn btn-default" href="{% url 'webgallery_show_dataset' p.id %}" role="button">View details &raquo;</a>
            </p>
        </div>
        <div class="clearfix"></div>
    </div>
    {% endfor %}
</div>


<!--         User:
        <select id="users_chooser">
            <option value="-1">All Members</option>
            {% if group_owners %}
                <optgroup label="Owners">
                {% for user in group_owners %}
                    <option value="{{ user.id }}" {% ifequal user.id ome.user_id %}selected{% endifequal %}>
                        {{ user.getFullName }}
                    </option>
                {% endfor %}
            {% endif %}
            {% if group_members %}
                <optgroup label="Members">
                {% for user in group_members %}
                    <option value="{{ user.id }}" {% ifequal user.id ome.user_id %}selected{% endifequal %}>
                        {{ user.getFullName }}
                    </option>
                {% endfor %}
            {% endif %}
        </select> -->

    <!-- Adding Scripts - First we link to the 'current' jQuery used by OMERO.web -->
    {% include "webgateway/base/includes/script_src_jquery.html" %}
    <script>
        $(function(){
            var current_url = document.URL.split("?")[0]    // remove query string

            $("#users_chooser").change(function(){
                // To swich group, we visit the webclient change_active_group, with groupId.
                var userId = $(this).val(),
                    page_url = current_url + "?user_id=" + userId;
                window.location.href = page_url;
            });
        });
    </script>

{% endblock %}