{% extends "base.html" %}
    {%- block view %}
    <div id="resource-tabs" class="resource-list-tabs">
        <a href="/context/questions/{{context['guid']}}">
        <img class="palette-tab-button has_tooltip_left {{questions}}" src="/static/icons/button-question.png" title="{{_('questions')}}"/>
        </a>
        <a href="/context/ideas/{{context['guid']}}">
        <img class="palette-tab-button has_tooltip_left {{ideas}}" src="/static/icons/button-idea.png" title="{{_('ideas')}}" />
        </a>
        <a href="/context/problems/{{context['guid']}}">
        <img class="palette-tab-button has_tooltip_left {{problems}}" src="/static/icons/button-problem.png" title="{{_('problems')}}" />
        </a>
        <a href="/context/reviews/{{context['guid']}}">
        <img class="palette-tab-button has_tooltip_left {{reviews}}" src="/static/icons/button-review.png" title="{{_('reviews')}}" />
        </a>
        <a href="/context/all/{{context['guid']}}">
        <img class="palette-tab-button has_tooltip_left {{all}}" src="/static/icons/button-list.png" title="{{_('all resources')}}" />
        </a>
        <a href="/context/gallery/{{context['guid']}}">
        <img class="palette-tab-button has_tooltip_left {{artifacts}}" src="/static/icons/button-blank.png" title="{{_('artifact gallery')}}" />
        </a>
    </div>
    <div class="grid-item context-info">
        <a href="/context/questions/{{context['guid']}}">
        <img class="question-icon has_tooltip {{questions}}" src="/static/icons/button-question.png" title="{{_('questions')}}" />
        </a>
        <a href="/context/ideas/{{context['guid']}}">
        <img class="idea-icon has_tooltip {{ideas}}" src="/static/icons/button-idea.png" title="{{_('ideas')}}" />
        </a>
        <a href="/context/problems/{{context['guid']}}">
        <img class="problem-icon has_tooltip {{problems}}" src="/static/icons/button-problem.png" title="{{_('problems')}}" />
        </a>
        <a href="/context/reviews/{{context['guid']}}">
        <img class="review-icon has_tooltip {{reviews}}" src="/static/icons/button-review.png" title="{{_('reviews')}}" />
        </a>
        <a href="/context/gallery/{{context['guid']}}">
        <img class="gallery-icon has_tooltip {{artifacts}}" src="/static/icons/button-blank.png" title="{{_('artifact gallery')}}" />
        </a>
        <a href="/context/all/{{context['guid']}}">
        <img class="wiki-icon has_tooltip {{all}}" src="/static/icons/button-list.png" title="{{_('all resources')}}" />
        </a>
        <div class="iconbox has_tooltip" title="{{_('launch')}}">
            {%- if 'activity' in context['type'] -%}
            <a href="/launch/{{context['guid']}}">
            {%- else -%}
            <a href="/article/{{context['guid']}}">
            {%- endif -%}
            <img class="grid-icon" src="/context/icon/{{context['guid']}}" />
            </a>
        </div>
        <div class="context-label">
            <span class="context-controls">
            <img id="moon-{{context['guid']}}"
            title="{{_('available offline')}}"
            {% if 'clone' in context['layer'] %}
            style="background-color:{{fill}}; border: 1px solid {{stroke}};"
            data-clone="true"
            {% endif %}
            class="moon-emblem has_tooltip" src="/static/icons/moon.png"/>
            <img id="star-{{context['guid']}}"
            title="{{_('favorite')}}"
            {% if 'favorite' in context['layer'] %}
            style="background-color:{{fill}}; border: 1px solid {{stroke}};"
            data-favorite="true"
            {% endif %}
            class="star-emblem has_tooltip" src="/static/icons/add-link-small.png"/>
            </span>
            &nbsp;
            {{context['title']}}
        </div>
    </div>
    <div id="accordion">
          <h2>{{_('Summary')}}</h2>
          <div class="pane" style="display:block">{{context['summary']}}</div>

          <h2>{{_('Author(s)')}}</h2>
          <div class="pane">
              {%- for author in context['author'] -%}
              <div id="sugar-man">
                  <img class="grid-icon-regular" src="/static/icons/sugar-xo.png" />
                        {% if (session['connected'] or False) %}
                            {{author['name']}}
                        {% else %}
                            {{sugar_nick}} 
                        {% endif %}
              </div>
              {%- endfor -%}
          </div>

          <h2>{{_('License')}}</h2>
          <div class="pane">{{_('Work in progress.')}}</div>
    </div>
    <div id="resource-section">
            {% include inner_template or '_context-resource-list.html' %}
    </div>
    {%- endblock view %}
    {%- block script %}
        {{ super() }}

        function delete_artifact (guid) {
            $(this).parent().parent().fadeOut();
            $.ajax({
                url: '/_artifacts/'+guid,
                type: 'DELETE',
                success: function(result) {
                        location.reload();
                    }
                });
        }

        function initComments () {
            var guid = $(this).data('guid');
            $('#throbber_'+guid).slideDown();
            $('#comments-button-'+guid).slideUp( function () {
                });
            $.get('/_comments/'+guid, { document: $(this).data('document'), resource_type:'{{resource_type}}' }, function ( data ) {
                $('#comments-'+guid).empty().append( data );
                $('#throbber_'+guid).slideUp(
                    function() {
                    $('#comments-'+guid).slideDown();
                    });
                $('#comment_form_'+guid).submit(onSubmit_Comment);
                initCollapse (guid);
                });
            }

        function initCollapse (guid) {
            $('span.collapse-button').click( function() {
                $('#comments-'+guid).slideUp();
                $('#comments-button-'+guid).slideDown();
            });
            $('span.delete-comment-button').click( function () {
                $(this).parent().parent().fadeOut();
                $.ajax({
                    url: '/_comments/'+$(this).data('guid'),
                    type: 'DELETE',
                    success: function(result) {
                        }
                    });
                });
        }

        // This is what happens when we (re)load the comments section.
        function onSubmit_Comment (e) {
                    e.preventDefault();
                    var guid = $(this).data('guid');
                    var document = $(this).data('document');
                    $('#comment_form_'+guid).slideUp();
                    $('#comment_button_'+guid).slideUp();
                    $('#comment_throbber_'+guid).slideDown();
                    $.post( '/submit_comment',
                            $(this).serialize() + '&document=' + $(this).data('document'),
                            function(response) {
                            $.get('/_comments/'+guid,
                                    { document: document, resource_type:'{{resource_type}}' }, function ( data ) {
                                $('#comment_throbber_'+guid).slideUp();
                                $('#comments-'+guid).empty().append( data );
                                $('#comment_form_'+guid).submit(onSubmit_Comment);
                                initCollapse (guid);
                                });
                            });
                    };

        $(function() {
            /* var source = new EventSource('/_events/solution');
            source.onmessage = function(data) {
                alert(data);
                };*/
            init_styles('#D7EBF2');
            $("#accordion").accordion();
            /*$("#accordion").tabs( #jquery-tools broke luckily we have jqueryui
                "#accordion div.pane",
                    {tabs: 'h2', effect: 'slide', initialIndex: null});*/

            $('#solution-form').submit( function() {
                $('#contribute-button').slideUp();
                $('#textarea-solution').slideUp();
                /* $('#contribute-button').attr("disabled", "disabled");*/
            });

            $('span.comments-button').click( initComments );

            $('.solution-link').click( function() {
                $.get($(this).data('href') + '?_pjax', {}, function ( data ) {
                    $('#resource-section').empty().append( data );
                    $('span.comments-button').click( initComments );
                    });
                $('#bottom-palette').slideUp();
                $( '#info' ).empty();
                $( '#meta' ).empty();
                History.pushState(null,null, $(this).data('href'));
                return false; //prevents form from being submitted.
                });

            // When viewing solutions
            if ($(".resource-header-column").length) {
                $('#bottom-palette').slideUp();
                };
            // When viewing articles 
            if ($("article").length) {
                $('#bottom-palette').slideUp();
                };

            // When displaying notice
            if ($(".notice").length) {
                    $("#mejorar-sistema").css( "left", "49%");
                    $("#mejorar-sistema").css( "top", "40%");
                    $('#bottom-palette').slideUp();
                    };

            // When viewing resources
            if ($(".resource-scrollable").length) {
                // initialize scrollable
                $(".resource-scrollable").scrollable( {vertical:true} );
                var api = $("#resource-scrollable").data("scrollable");
                var last_page = {{page or 0}};
                function load_adyacent_pages(page) {
                    if (page-1 > 0) {
                        $.get( '?page='+(page-1)+'&_pjax', { },
                          function( data ) {
                            $( '#resource-page-'+(page-1)).empty().append( data );
                          });
                        }
                    if (page+1 <= {{total_pages or 0}}) {
                        $.get( '?page='+(page+1)+'&_pjax', { },
                          function( data ) {
                            $( '#resource-page-'+(page+1) ).empty().append( data );
                          });
                        }
                }

                api.seekTo({{ (page or 0) -1}},0);
                load_adyacent_pages({{page}});

                // initialize scroll range input
                $("#vrange").rangeinput({vertical: true});
                $("#vrange").change(function(event, value) {
                    api.seekTo(value-1);
                    });
                range_api = $("#vrange").data("rangeinput");
                range_api.setValue({{page}});

                api.onSeek( function() {
                    new_page = api.getIndex()+1;
                    $('div.generic_tooltip').hide();
                    History.pushState(null,null,'?page=' + new_page);
                    range_api.setValue(new_page);
                    if (new_page != last_page+1 && new_page != last_page-1) {
                        $.get( '?page='+new_page+'&_pjax', { },
                          function( data ) {
                            $( '#resource-page-'+new_page ).empty().append( data );
                          }
                        );
                        $( '#resource-page-'+last_page ).empty().append('<div id="throbber-box"><img id="throbber" src="/static/images/throbber10.gif" /></div>');
                        }
                    last_page=new_page;
                    load_adyacent_pages(new_page);
                    $( '#info' ).empty().append('{% trans %}page '+new_page+' of{% endtrans %} {{total_pages}}');
                    });
                };
        });
    {%- endblock script %}