{% extends "views/list.htm" %}
{% load static %}
{% load i18n %}

{% block header %}
{% endblock %}

{% block search_placeholder %}{{branch_list.search_placeholder}}{% endblock %}


{% block list_wrapper %}
<div class="grid" class="grid-list">
    <!-- ko if: $data.loadingBranchDomains() === false -->

        <!-- ko if: $data.filtered_items().length === 0 -->
        <div style="padding: 20px; background: white; font-weight: 600;">
            {% trans "Because of ontology rules, there are no branches that can be appended." %}
        </div>
        <!-- /ko -->

        <!-- ko foreach: $data.filtered_items -->
            <div class="library-card" style="display: flex; align-items: center;" data-bind="click: $parent.selectItem.bind($parent), css:{ 'selected selected-card': $data.selected() && $data.publication_id===true, disabled: $data.publication_id === false }"> 
                <div class="library-icon" style="margin: 5px;">
                    <!-- ko if: $data.publication_id -->
                    <span class="icon-wrap icon-wrap-sm icon-circle branch-icon bg-mint" style="cursor: pointer;" data-bind="click: $parent.appendBranch.bind($parent), clickBubble: false">
                        <i class="branch-library-icon ion-plus-round"></i>
                    </span>
                    <!-- /ko -->
                    <!-- ko ifnot: $data.publication_id -->
                    <span class="icon-wrap icon-wrap-sm icon-circle branch-icon bg-gray">
                        <i class="fa fa-hand-o-left"></i>
                    </span>
                    <!-- /ko -->
                </div>
                <div>
                    <div class="library-card-main" data-bind="attr: {'data-arches-graphid': $data.graphid}">
                        <a class="listitem_name" data-bind="text: $data.name + ($data.publication_id ? '': ' - unpublished')">
                        </a>
                    </div>
                    <div 
                        class="library-card-subtitle" 
                        style="
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                            max-width: 250px;
                            font-size: smaller;
                        "
                        data-bind="text: $data.description"
                    >
                    </div>
                </div>
            </div>
        <!-- /ko -->

    <!-- /ko -->
    <div data-bind="css: {'branch-list-loading-mask': $data.loadingBranchDomains }"></div>
</div>
{% endblock %}

