<%inherit file="/template.html" />
<%namespace name="components" file="/components.html"/>
<%namespace name="sidebar_defs" file="/sidebar.html"/>
<%namespace name="state" file="/poll/state.html"/>
<% from adhocracy.lib import sorting %>
<%def name="title()">${c.page.title|n}</%def>

<%def name="breadcrumbs()">${h.text.breadcrumbs(c.text)|n}</%def>


<%block name="col3">
<div id="sidebar" class="box-style">

    %if c.page.has_variants:

    ${components.vertical_tabs(c.variant_items, 'paper_selection', current_variant=c.variant)}

    <div class="floatbox changes_switch" id="norm-diff-switcher"
         data-bind="css: {inactive: variants.current.is_head}">
        <span>${_("Highlight Changes")}</span>
        <div class="switch_buttons">
            <a class="button_small"
               data-bind="css: {active: variants.switchDiff},
                          click: function () {variants.switchDiff(true)}"
               href="#">${_("On")}</a>
            <a class="button_small"
               data-bind="css: {active: !variants.switchDiff()},
                          click: function () {variants.switchDiff(false)}"
               href="#">${_("Off")}</a>
        </div>
    </div>

    %if can.proposal.create() and c.page.allow_selection and \
        (c.instance.allow_propose_changes or c.amendment):
    <%
        if c.amendment:
            href = h.entity_url(c.page, member='amendment/new')
            text = _("Propose New Amendment")
        else:
            href = h.base_url('/proposal/new', query_params={'page': c.page.id})
            text = _("New Proposal")
    %>
    ## FIXME: Button for unauth users
    <div class="version_function">
        <a id="new-proposal-button"
           class="button highlight"
           target="_self"
           href="${href}">
            ${text}
        </a>
    </div>
    %endif

    %endif

    %if not c.amendment:
    <div class="sidebar_box">
        <h3>${_("Information about the norm")}</h3>

        ## Shortlink http://domain/d/1234
        ${sidebar_defs.shortlink(c.page)}

        <h6>${_('Last Activity')}</h6>
        <p><time>${h.datetime_tag(c.page.find_latest_comment_time())|n}</time></p>

        <h6>${_('Category')}</h6>
        <p>
            %if c.page.category:
            ${components.category_link(c.page.category)}
            %else:
            ${_("This page is not assigned to any category")}
            %endif
        </p>

        %if c.page.milestone and c.instance.milestones:
        <h6>${_('Milestones')}</h6>
        <p>
            ${_("This norm relates to the milestone %s."
               ) % h.milestone.link(c.page.milestone)|n}
        </p>
        %endif

        %if len(c.page.subpages):
        %endif
        ## Fixme: Info zur Version
        ## <h6>Angelegt</h6>
        ## <p>von <a href="#">Timoteus</a> am
        ## <time pubdate="pubdate">01.01.2011</time>,
        ## setdem <a href="#">3 Änderungen</a>.</p>

        ${tiles.tag.sidebar(c.page)}

        %if len(c.page.subpages):
        <h6>${_('Subnorms')}</h6>
        <ol>
            %for page in sorting.delegateable_title(c.page.subpages):
            <li><a href="${h.entity_url(page)}">${page.title}</a></li>
            %endfor
        </ol>
        %endif
    </div>
    %endif

    <% h.need.adhocracy_ko %>

    <script type="text/javascript">
        /* <![CDATA[ */
        var init_variant = ${c.variant_details_json|n}

        var viewModel = new adhocracy.ko.PaperModel()
        viewModel.variants.init(init_variant);
        //debugger;
        ko.applyBindings(viewModel);
        /* ]]> */
    </script>

</div>
</%block>

<%block name="main_content">

<script id="proposalTmpl" type="text/html">
    %if not c.amendment:
    <h5 data-bind="text:proposal_title"></h5>
    <div data-bind="html: proposal_text"></div>
    <div class="comment_actions floatbox">
        <div class="utility">
            <span class="hover_active" style="display: none;">
                <!-- <a href="#">Link</a> ·  -->
                <a data-bind="attr: {href: proposal_url}">${_('View Proposal')}</a>
            </span>
            &nbsp;
        </div>
    </div>
    %else:
    <div data-bind="html: proposal_text"></div>
    <div>
        <div class="utility" style="float: right">
            ${_('Created by %(creator)s on %(datetime)s') % {
                'creator': '<a target="_top" data-bind="text: proposal_creator_name, attr: {href: proposal_creator_url}"></a>',
                'datetime': '<span data-bind="html: proposal_create_time"></span>',
            }|n}
        </div>
        <a class="button_small" target="_self" data-bind="attr: {href: proposal_edit_url}, if: proposal_can_edit">${_('edit')}</a>
        <a class="button_small" target="_self" data-bind="attr: {href: proposal_delete_url}, if: proposal_can_delete">${_('delete')}</a>
    </div>
    %endif
</script>

%if not c.amendment and can.page.delete(c.page) and active != 'diff':
<a class="button title delete"
   href="${h.entity_url(c.page, member='ask_delete')}">
    ${_("delete")}
</a>
%endif

%if c.amendment:
<h2>${_("Proposed amendments for \"%s\"") % c.page.title}</h2>
%else:
<h2>${_("Norm: %s") % c.page.title}</h2>
%endif


<div id="paper_box">
    <div class="paper_header">
        <div id="norm-vote-widget"
             data-bind="html:voteWidget">
            %if c.current_variant_poll:
            ${tiles.poll.widget(c.current_variant_poll, cls="big")}
            %endif
        </div>
        <h3>
            <span data-bind="text:variants.current.display_title">
                ${c.variant_details['display_title']}
            </span>

            <div class="utility">
                %if c.variant_details['can_edit'] and not c.amendment:
                <a href="${c.variant_details['edit_url']}"
                   data-bind="attr: {href: variants.current.edit_url}">${_('edit')}</a>
                %endif
            </div>
        </h3>
    </div>
    <div class="paper_text">
        <div data-bind="visible: variants.showPlain(),
                        html: variants.current.text">
            %if not c.variant_details['text']:
            ${_("No text.")}
            %else:
            ${c.variant_details['text']|n}
            %endif
        </div>

        <div data-bind="visible: variants.showDiff()">
            <h4>${_("Text compared to the original version")}</h4>
            <div data-bind="html: variants.current.text_diff">
                ${c.variant_details['text_diff']|n}
            </div>
        </div>
        %if c.text and c.text.text and not c.overlay:
        ${components.social_share_buttons(c.variant_details['title'])}
        %endif

        <div data-bind="visible: variants.current.history_count() > 1"
             style="${'display: none' if c.variant_details['history_count'] > 1 else ''}">
            <a rel="#overlay-url"
               href="${c.variant_details['history_url']}"
               data-bind="attr: {href: variants.current.history_url}">
                ${_("History")}
            </a>
        </div>
    </div>

    <div class="paper_comments">
        <div class="paper ${'only-no-js' if c.variant_details else ''}"
             id="p1"
             data-bind="css: {'only-no-js': variants.current.is_head}">
            <h4>${_("Reasoning") if c.amendment else _("Proposal")}</h4>
            <div data-bind="template: {name: 'proposalTmpl', foreach: variants.current.selections}">
            </div>
            %if not c.variant_details['is_head']:
            <div class="only-no-js">
                %for selection in c.variant_details['selections']:
                %if not c.amendment:
                <h5>${selection['proposal_title']}</h5>
                <div>${selection['proposal_text']|n}</div>
                <div class="comment_actions floatbox">
                    <div class="utility">
                        <span class="hover_active" style="display: none;">
                            <!-- <a href="#">Link</a> ·  -->
                            <a href="${selection['proposal_url']}">
                                ${_("View Proposal")}
                            </a>
                        </span>
                        &nbsp;
                    </div>
                </div>
                %else:
                <div>${selection['proposal_text']|n}</div>
                <div>
                    <div class="utility" style="float: right">
                        ${_('Created by %(creator)s on %(datetime)s') % {
                            'creator': '<a target="_top" href="%(proposal_creator_url)s">%(proposal_creator_name)s</a>' % selection,
                            'datetime': '<span>%(proposal_create_time)s</span>' % selection,
                        }|n}
                    </div>
                    %if selection['proposal_can_edit']:
                    <a class="button_small" target="_self" href="${selection['proposal_edit_url']}">${_('edit')}</a>
                    %endif
                    %if selection['proposal_can_delete']:
                    <a class="button_small" target="_self" href="${selection['proposal_delete_url']}">${_('delete')}</a>
                    %endif
                </div>
                %endif
                %endfor
            </div>
            %endif
        </div>
    </div>
</div>


<%components:tutorial>
<ol id="joyRideTipContent">

    <li data-id="norm-vote-widget"
        data-tip-location="top" class="custom">
        <p>${_('tutorial_norm_show_vote')}</p>
    </li>

    <li data-id="norm-diff-switcher"
        data-tip-location="top" class="custom">
        <p>${_('tutorial_norm_show_diff')}</p>
    </li>

    <li data-id="new-proposal-button" data-next="${_('Close')}"
        data-tip-location="top" class="custom">
        <p>${_('tutorial_norm_show_new')}</p>
    </li>

</ol>
</%components:tutorial>

</%block>
