{% extends 'django_master/_single_col.html' %}
{% load url from future %}

{% block page_title %}Routes{% endblock %}

{% block extra_css %}
<style>
    .route-list {}

    .route-name,
    .route-name:visited {
        overflow-x: hidden;
        text-overflow: ellipsis;
        color: inherit;
        outline: 0 !important;
    }

    .route-name:hover {
        color: #3b8bba;
        cursor: pointer;
    }

    .route-subitem {
        display: none;
        font-size: 80%;
    }

    .route-item.is-open > .route-subitem {
        display: block;
    }

    .route-link-wrapper.is-hidden {
        display: none;
    }
</style>
{% endblock %}


{% block extra_js %}
<script>
(function($){

    function reverse(url, args){
        var RE = /(\([^\(\)]+\))/;
        url = url.replace(/\(\?i\)/g, '');

        $.each(args, function(i, arg){
            url = url.replace(RE, arg);
        });

        url = url.trim().replace(/(^\^)|(\$$)/g, '');

        return '/' + url;
    }


    $('.route-item').each(function(i, el){

        $(el).find('.route-name').click(function(ev){
            el.classList.toggle('is-open');
        });

    });


    $('[data-reverse]').click(function(ev){
        var el = $(ev.currentTarget),
            url = el.attr('data-reverse'),
            args = [],
            fieldset = el.closest('fieldset');

        fieldset.find('input').each(function(i, el){
            args.push( el.value );
        });

        var reversed = reverse(url, args);

        fieldset.find('.route-link-wrapper').removeClass('is-hidden');
        var link = fieldset.find('.route-link');
        link.attr('href', reversed);
        link.text(reversed);
    });

})(jQuery);
</script>
{% endblock %}

{% block content %}

    <p>&nbsp;</p>

    <div class="pure-g route-list">
        {% for route in route_list %}
            {% include 'django_master/includes/_routes_item_list.html' with route=route %}
        {% endfor %}
        </div>
    </div>

{% endblock %}

