{% extends "base.html" %}{% load static %}
{% block styles %}
<style type=text/css>
{% if community %} 
    body {
        background-color: {{ community.body_bg_color }};
        background-image: url('{{ community.background_url }}');
        background-size: {{ community.background_size }};
        background-position-x: {{ community.background_position_x }};
        background-position-y: {{ community.background_position_y }};
    }
{% endif %}
</style>
{% endblock %}
{% block body %}
    <div id="contentwrapper" class="indextemplate">
        <a id="logo" href="{{ base_url }}"{% if community %} style="background-color: {{ community.header_bg_color }};"{% endif %}>
            <img src='{% if community %}{{ community.logo_url }}{% else %}{% static "images/multi-logo.png" %}{% endif %}' />
        </a>
        <!--a id="sponsorlogo" target="_blank"></a-->
        <form id="buildlayoutform" method="GET" action="{{ base_url }}view/">
            <div class="tabs">
                {% if not community %}
                <ul>
                    <li id="custom-tab-selector"><a href="#custom">Customize</a></li>
                    <li id="communities-tab-selector"><a href="#communities">Communities</a></li>
                    <!--li id="following-tab-selector"><a href="#following">Following</a></li-->
                </ul>
                {% else %}
                <ul style="background-color: {{ community.header_bg_color }};">
                    <li id="communities-tab-selector"><a href="#communities">Community</a></li>
                    <li id="custom-tab-selector"><a href="#custom">Customize</a></li>
                    <!--li id="following-tab-selector"><a href="#following">Following</a></li-->
                </ul>
                {% endif %}
                <div id="custom">
                    <div class='formcaption'>Multistream currently only supports <a href="http://twitch.tv">Twitch</a> streams.</div>
                    {% for stream_index in num_streams %}
                    <div class=streamfieldcontainer><!--label for="s{{ forloop.counter0}}">Stream {{ stream_index|add:1 }}</label--><input placeholder="Stream {{ stream_index|add:1 }}" data-index="{{ stream_index }}" class="streamfield deletable" type="text" name="s{{ forloop.counter0}}" id="field{{ forloop.counter0 }}" {% if streams %}value="{{ streams.pop }}"{% endif %} /><span class="streamstatusicon"></span></div>
                    {% endfor %}
                    <div class='layoutselectors clearfix'>
                    {% for layout_group in layout_groups %}
                    <div class="layoutgroup" data-streams="{{ layout_group.0.streams|length }}">
                    {% for layout in layout_group %}
                    <div class="layoutselector" data-index="{{ layout.index }}" style="{% if not forloop.last %}margin-right:10px;{% endif %}margin-bottom:10px;">
                        <div style="text-align:center;margin-bottom:4px;margin-top:4px;"><input name="layout" value="{{ layout.index }}" data-index="{{ layout.index }}" type="radio" {% if not layout.index %}checked="checked"{% endif %}/></div>
                        <div style="width:{{ layout.scaled_thumb.max_x }}px;height:{{ layout.scaled_thumb.max_y }}px;position:relative;">
                            {% for stream in layout.scaled_thumb.streams %}
                            <div class="streamthumb" style="position:absolute;width:{{ stream.dim.x|add:-2 }}px;height:{{ stream.dim.y|add:-2 }}px;left:{{ stream.pos.x }}px;top:{{ stream.pos.y }}px;text-align:center;line-height:{{ stream.dim.y|add:-2 }}px;">{{ forloop.counter }}</div>
                            {% endfor %}
                            {% for chat in layout.scaled_thumb.chats %}
                            <div class="chatthumb" style="position:absolute;width:{{ chat.dim.x|add:-2 }}px;height:{{ chat.dim.y|add:-2 }}px;left:{{ chat.pos.x }}px;top:{{ chat.pos.y }}px;text-align:center;line-height:{{ chat.dim.y|add:-2 }}px;">C</div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endfor %}
                    </div>
                    {% endfor %}
                    </div>
                </div>
                <!--div id="following" class="clearfix">
                    <div class='authenticate twitch-widget not-authenticated'>
                        <div>Connect with Twitch to see your followed channels.</div>
                        <br />
                        <img class="connect-twitch" src="{{ base_url }}static/images/connect-twitch.png" />
                    </div>
                    <div id="followedlist" class='channellist twitch-widget authenticated'>
                        <div class='loading'>Loading...</div>
                    </div>
                </div-->
                <div id="communities" class='channellist clearfix'>
                    {% if not community %}
                    <div id='quickpicks'>
                        <!--<div id='live-filters' class='filter-group floatright'>
                            <button data-filter-value=".live">Live</button>
                            <button data-filter-value="*">All</button>
                        </div>-->
                        <!--<div id='sort-filters' class='filter-group floatright'>
                            <button data-sort-value="name">Alphabetical</button>
                            <button data-sort-value="live">Live</button>
                            <button data-sort-value="random">Shuffle</button>
                        </div>-->
                        <div id='community-filters' class='filter-group'>
                            {% for community in communities %}<button data-filter-value=".community-{{ community.slug }}">{{ community.name }}</button>
                            {% endfor %}<button data-filter-value=".channel">All</button>
                        </div>
                    </div>
                    {% endif %}
                    <div id="communitylist">
                    <div class='grid-sizer'></div>
                    {% if not community %}
                    {% for community in communities %}
                        {% if community.home_url and community.logo_url %}
                        <div class="isosquare community community-{{ community.slug }}">
                            <a target="_blank" href="{{ community.home_url }}">
                                <div class="communityimage" style="background-image: url('{{ community.logo_url }}'); background-color: {{ community.header_bg_color }};">
                                    <div class="communitycaption">
                                        <div class="visit">Visit the {{ community.name }} community &raquo;</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        {% endif %}
                    {% endfor %}
                    {% endif %}
                    {% for channel in channels %}
                        <div class="isosquare channel{% if channel.live %} live{% endif %}{% for community in channel.communities.all %} community-{{ community.slug }}{% endfor %}" rel="{{ channel.name | lower }}">
                            <div class="channelimage" style="background-image: url('{{ channel.image }}');">
                                <div class="channelcaption">
                                    <div class="channelname">{{ channel.name | lower }}</div>
                                    {% if channel.game and channel.live %}<div class=game>{{ channel.game }}</div>{% endif %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    </div>
                </div>
            </div>
        <div id="submitbuttoncontainer" class='clearfix'><button id='clearbutton'>Clear</button><button id='cancelbutton'>Cancel</button><button type="submit" value="Watch Streams">Watch Streams</button></div>
        <div style="clear:both;"></div>
        {% if community %}
        <ul id="menu-primary-menu" class="menu">
            <li>Visit <a href="{{ community.home_url }}" target="_blank">{{ community.name }}</a> / </li>
            <li>Powered by <a href="//multistre.am/" target="_blank">Multistre.am</a> </li>
        </ul>
        {% else %}
        <ul id="menu-primary-menu" class="menu">
            <li>Want more streaming platforms and customization power? Try out <a href="//lazygoat.tv/multihome" target="_blank">LazyGoat</a></li>
        </ul>
        {% endif %}
        </form>
    </div>
{% endblock %}