{% extends "theme_editor/base_list.html" %}

{% load i18n %}
{% load theme_editor_tags %}
{% load theme_editor_filters %}

{% block title %}{{ block.super }}Theme Picker{% endblock %}

{% block extra_head %}
{{ block.super }}
<link rel="stylesheet" href="{{ STATIC_URL }}css/theme-editor.css" />
{% endblock %}
        
{% block body %}
<h1>{% trans "Theme Picker" %}</h1>

{% for theme in themes %}
    {% theme_detail theme current_theme%}
{% endfor %}

{% endblock %}
{% block extra_body %}
{{ block.super }}
<script type="text/javascript" src="{{ STATIC_URL }}js/lightbox/jquery.lightbox_me.js"></script>
<script type="text/javascript">
    $(".theme-info").each(function(){
        if ( $(this).attr('data') == "{{ current_theme }}" ){
            $(this).addClass('selected');
        }
    });

    $('.screenshot img').click(function(){
        var data = $(this).parents('.theme-info').attr('data');

        $('.lightbox').each(function(){
            if ( $(this).attr('data') == data ){
                $(this).lightbox_me({
                    centered: true,
                    closeClick: true,
                });
            }
        });
    });

</script>
{% endblock %}
