{% extends "base.html" %}{% load static %}
{% block styles %}
    <style type="text/css">
{% if community %} 
    body {
        background-color: {{ community.body_bg_color }};
        background-image: none;
    }
{% endif %}
{% for g in layout_groups %}
    {% for l in g %}
        #layoutwrapper[data-layout-index="{{ l.index }}"] { width:{{ l.max_x }}%; height:{{ l.max_y }}%; }
        {% for s in l.streams %}
        #layoutwrapper[data-layout-index="{{ l.index }}"] .streamcontainer[data-index="{{ s.index }}"] { display: block; width:{{ s.dim.x }}%; height:{{ s.dim.y }}%; left:{{ s.pos.x }}%; top:{{ s.pos.y }}%; }
        #layoutwrapper[data-layout-index="{{ l.index }}"] .streamoverlay[data-index="{{ s.index }}"] { display: block; width:{{ s.dim.x }}%; left:{{ s.pos.x }}%; top:{{ s.pos.y }}%; }
        {% endfor %}
        {% for c in l.chats %}
        #layoutwrapper[data-layout-index="{{ l.index }}"] .chatcontainer[data-index="{{ c.index }}"] { display: block; width:{{ c.dim.x }}%; height:{{ c.dim.y }}%; left:{{ c.pos.x }}%; top:{{ c.pos.y }}%; }
            {% if c.overlapped_chats|length < 2 %}
                #layoutwrapper[data-layout-index="{{ l.index }}"] .chatcontainer[data-index="{{ c.index }}"] { z-index: 0 !important; visibility: visible !important; }
            {% endif %}
            {% for c2 in c.overlapped_chats %}
                #layoutwrapper[data-layout-index="{{ l.index }}"] .chatcontainer[data-index="{{ c.index }}"] .chatselector[data-index="{{ c2.index }}"] { display: block; }
            {% endfor %}
        {% endfor %}
        {% if l.streams|length == 1 %}
            #layoutwrapper[data-layout-index="{{ l.index }}"] .hidden-when-one-stream {display: none;}
        {% endif %}
        {% if not l.has_chat %}
            #layoutwrapper[data-layout-index="{{ l.index }}"] .hidden-when-no-chat {display: none;}
            #layoutwrapper[data-layout-index="{{ l.index }}"] .streamoverlay .mainbuttons button {border-radius: 5px;}
        {% endif %}
    {% endfor %}
{% endfor %}
    </style>
{% endblock styles %}
{% block body %}
    <!--div id="backgroundoverlay"></div-->
    <div id="sidebar">
        <a class="edit sidebar-button" href="{{ edit_url }}" title="Edit Streams"></a>
        <div class="layoutselectors">
        {% for g in layout_groups %}
            <div class="layoutgroup{% if layout_group.0.streams|length == g.0.streams|length %} current{% endif %}" data-streams="{{ g.0.streams|length }}">
            {% for l in g %}
                <div class="layoutselector" id="layoutselector{{ l.index }}" data-index="{{ l.index }}">
                    <div style="width:{{ l.scaled_tiny.max_x }}px;height:{{ l.scaled_tiny.max_y }}px;position:relative;">
                        {% for s in l.scaled_tiny.streams %}
                        <div class="streamthumb" style="position:absolute;width:{{ s.dim.x|add:-2 }}px;height:{{ s.dim.y|add:-2 }}px;left:{{ s.pos.x }}px;top:{{ s.pos.y }}px;text-align:center;line-height:{{ s.dim.y|add:-2 }}px;">{{ forloop.counter }}</div>
                        {% endfor %}
                        {% for c in l.scaled_tiny.chats %}
                        <div class="chatthumb" style="position:absolute;width:{{ c.dim.x|add:-2 }}px;height:{{ c.dim.y|add:-2 }}px;left:{{ c.pos.x }}px;top:{{ c.pos.y }}px;text-align:center;line-height:{{ c.dim.y|add:-2 }}px;">C</div>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
            </div>
        {% endfor %}
        </div>
        <a class="rotate sidebar-button" href="#" title="Rotate Streams"></a>
        <!--a id="sponsorlogo" target="_blank"></a-->
        <a id="logo" href="{{ base_url }}">
            <img src='{% if community %}{{ community.logo_url }}{% else %}{% static "images/multi-logo.png" %}{% endif %}' />
        </a>
    </div>
    <div id="contentwrapper" class="viewtemplate">
        <div id="layoutwrapper">

            {% for obj in layout_group.0.objects %}
                {% include "object.html" %}
            {% endfor %}

        </div>
    </div>
{% endblock %}