<%inherit file="/template.html" />
<%namespace name="components" file="/components.html"/>
<%def name="title()">${_("Instances")|n}</%def>

<%def name="breadcrumbs()">
    ${h.instance.breadcrumbs()|n} ${h.url.link(_("Instances"), h.base_url('/instance'))|n}
</%def>


<%def name="header()">
<div class="morelink_header">
    <h1 class="page_title">${_("Instances")}</h1>

    %if can.instance.create():
    <a class="more_link"
       href="${h.base_url('/instance/new')}">${_("Create new instance")}</a>
    %endif
</div>

<p>${_("Instances are little democracies that are ran by their community.")}</p>
</%def>


<%def name="as_tiles(instances, columns=2)">
    <div class="tile-table">
        <% counter = 0 %>

        %for instance in instances:

        %if counter % columns == 0:
        <div class="tile-row">
        %endif

            <a class="tile" href="${h.entity_url(instance)}">
                <img class="tile-image" src="${h.logo_url(instance, 160, 320)}" alt="" />
                <h3>${instance.title}</h3>
                <p>${h.truncate(h.markdown_to_plain_text(instance.description, safe_mode='adhocracy_config'), 200, whole_word=True)}</p>
                <span class="tile-button button">${_('participate')}</span>
            </a>

        <% counter += 1 %>
        %if counter % columns == 0:
        </div>
        %endif

        %endfor

        %if counter % columns != 0:

        %for i in range(counter % columns, columns):
            <span class="tile"></span>
        %endfor

        </div>
        %endif
    </div>
</%def>


<%def name="list_button()">
<div class="list_button">
    %if can.instance.create():
    <a class="button title add" href="/instance/new">${_("new instance")}</a>
    %endif
</div>
</%def>


<%block name="sidebar">
%if h.config.get_bool('adhocracy.instance_index_sidebar'):
    ${c.instance_pager.render_facets(cls='sidebar_box')}
%endif
</%block>


<%block name="main_content">
%if h.config.get_bool('adhocracy.instance_index_as_tiles'):
    %if h.config.get_bool('adhocracy.instance_index_sidebar'):
        ${header()}
        ${as_tiles(c.instance_pager.items, columns=2)}
        ${c.instance_pager.render_pages_nav()}
        ${list_button()}
    %endif
%else:
${header()}

<div class="table" id="instance_table">

    ${c.instance_pager.render_pager()}

    %if can.badge.edit_instance():
    <div class="overlay" id="edit_badges_container">
        <form id="edit_badges">
            ${h.field_token()|n}
            <h5 data-bind="text: selected.title">Title</h5>
            <ul data-bind="foreach: selected.badges">
                <li class="nobullet">
                <input class="badgetsform_input" type="checkbox"
                name="badge"
                data-bind="value: id, checked: checked">
                <span data-bind="attr: {class: css_class()}">
                    <a data-bind="text: title">Abgelehnt</a>
                </span>
                </input>
                </li>
            </ul>
            <a href="#" class="button" data-bind="click: save">Save</a>
            or
            <a href="" data-bind="click: cancel">Cancel</a>
        </form>
    </div>
    %endif

</div>

${list_button()}
%endif
</%block>


<%block name="headline">
%if not h.config.get_bool('adhocracy.instance_index_sidebar') and h.config.get_bool('adhocracy.instance_index_as_tiles'):
    ${header()}
    ${as_tiles(c.instance_pager.items, columns=3)}
    ${c.instance_pager.render_pages_nav()}
    ${list_button()}
%endif
</%block>
