{% extends "master.html" %}

{% block title %}Home{% endblock %}
{%block tag %}home{% endblock %}


{% block header %}
    <link rel="stylesheet" type="text/css" media="screen"
        href="{{ url_for('static', filename='toggle.css') }}"/>
{% endblock %}

{% macro render_row(items) -%}
    {% for repo in items %}
        {% if loop.index is divisibleby(3) %}
    <div class="project_row">
        {% endif %}
        <a class="project_link"
            href="{{ url_for('view_repo', repo=repo.name) }}" class="logo_link"
            style="background-image: url({{ url_for("static", filename="placebo.png") }})">
            {# TODO: get project logo #}
            <span class="repo_name">{{ repo.name }}</span>
            {% if repo.description %}
            <span class="repo_desc">{{ repo.description | wraps(20) }}</span>
            {% endif %}
        </a>
        {% if loop.index is divisibleby(3) %}
    </div>
        {% endif %}
    {% else %}
    <p>No project found</p>
    {% endfor %}
{%- endmacro %}

{% macro render_repos(list, total, page, title, count, id) %}
<section class="project_list" id="{{ id }}">
        <header>
            <h{% if username %}3{% else %}2{% endif %}>{{ title }} ({{ count }})</h{% if username %}3{% else %}2{% endif %}>
        </header>
        {% if total and total > 1 %}
        <aside>
            <table>
                <tr>
                    <td>
                    {% if page > 1%}
                        <a href="{{ url_for('index') }}?page={{page - 1}}">
                            &lt; Previous
                        </a>
                    {% else %}
                        &lt; Previous
                    {% endif %}
                    </td>
                    <td>{{ page }} / {{ total }}</td>
                    <td>
                        {% if page < total %}
                        <a href="{{ url_for('index') }}?page={{page + 1}}">
                            Next &gt;
                        </a>
                        {% else %}
                        Next >
                        {% endif %}
                    </td>
                </tr>
            </table>
        </aside>
        {% endif %}
        <div>
            {{ render_row(list) }}
        </div>
    </section>
{% endmacro %}

{% block content %}
    {% if username %}
        <h2>{{ username | avatar(36) | safe }} {{ username }}</h2>
        <aside class="show_parts">
            <strong>My repos:</strong>
            <div class="switch oneline">
                <input type="radio" class="switch-input" name="myrepos" value="on" id="myreposon" checked="checked">
                <label for="myreposon" class="switch-label switch-label-off">Show</label>
                <input type="radio" class="switch-input" name="myrepos" value="off" id="myreposoff">
                <label for="myreposoff" class="switch-label switch-label-on">Hide</label>
                <span class="switch-selection"></span>
            </div>
            <strong>Forks:</strong>
            <div class="switch oneline">
                <input type="radio" class="switch-input" name="myforks" value="on" id="forkson" checked="checked">
                <label for="forkson" class="switch-label switch-label-off">Show</label>
                <input type="radio" class="switch-input" name="myforks" value="off" id="forksoff">
                <label for="forksoff" class="switch-label switch-label-on">Hide</label>
                <span class="switch-selection"></span>
            </div>
            <strong>All repos:</strong>
            <div class="switch oneline">
                <input type="radio" class="switch-input" name="repos" value="on" id="reposon" checked="checked">
                <label for="reposon" class="switch-label switch-label-off">Show</label>
                <input type="radio" class="switch-input" name="repos" value="off" id="reposoff">
                <label for="reposoff" class="switch-label switch-label-on">Hide</label>
                <span class="switch-selection"></span>
            </div>
        </aside>

        {{ render_repos(user_repos, total_page_repos, repopage, 'My Projects', user_repos_length, 'myrepos') }}
        {{ render_repos(user_forks, total_page_forks, forkpage, 'My Forks', user_forks_length, 'myforks') }}
    {% endif %}
    {{ render_repos(repos, total_page, page, 'All Projects', repos_length, 'repos') }}
{% endblock %}

{% block jscripts %}
    {{ super() }}
    {% if username %}
    <script type="text/javascript">
        $(function(){
            $('.show_parts input[type="radio"]').change(function(){
                $('#' + $(this).attr('name')).toggle();
            });
        });
    </script>
    {% endif %}
{% endblock %}