{% load template_tags %}
{% load i18n %}

<div style="height: 100%;" id="external-page-content">
    <div class="settings-panel">

        <div class="settings-panel-heading">
            <div class="graph-designer-title">
                <i data-bind='css: graph.iconclass'></i><div class="name" data-bind='text: graph.name'></div>
                <span class="graph-crm-class" data-bind="if: graph.ontology()">
                    (
                    <span data-bind="text: graph.ontology().name"></span>,
                    <span data-bind="text: graphSettingsViewModel.ontologyClassFriendlyName"></span>
                    )
                </span>
            </div>
        </div>

        <!-- Settings Forms -->
        <div
            style="padding: 20px;"
            class="settings-panel-body set-variable-pixel-height"
        >
            <div class="graph-designer-header" data-bind="text: graph.isresource() ? {% quoted_trans 'Resource Model Identifiers' %} : {% quoted_trans 'Branch Identifiers' %} "></div>
            <div id="cards" class="graph-settings-panel-body fade in">
                <form class="widgets">
                    <div class="row widget-container">
                        <div class="form-group">
                            <div class="relative">
                                <label class="col-xs-12 control-label widget-input-label">
                                    {% trans "Name" %}
                                </label>
                            </div>

                            <div class="col-xs-12">
                                <input placeholder="{% trans "Name" %}" class="form-control input-md widget-input" data-bind="value:graph.name, valueUpdate: 'keyup'">
                            </div>
                        </div>
                    </div>

                    <div class="row widget-container">
                        <div class="form-group">
                            <div class="relative">
                                <label class="col-xs-12 control-label widget-input-label"> {% trans "Subtitle" %} </label>
                            </div>

                            <div class="col-xs-12">
                                <input placeholder="{% trans "Subtitle" %}" class="form-control input-md widget-input" data-bind="value:graph.subtitle, valueUpdate: 'keyup'">
                            </div>
                        </div>
                    </div>

                    <div class="row widget-container">
                        <div class="form-group">
                            <div class="relative">
                                <label class="col-xs-12 control-label widget-input-label"> {% trans "Ontology" %} </label>
                            </div>

                            <div class="col-xs-12 crm-selector">
                                <select class="design" data-bind="attr: {'disabled': graphSettingsViewModel.nodeCount() > 1 }, value: graph.ontology_id, valueAllowUnset: true, options: ontologies, optionsText: 'name', optionsValue:'ontologyid', optionsCaption: {% quoted_trans "No ontology" %}, chosen: {disable_search_threshold: 10, width: '500px'}"></select>
                            </div>
                        </div>
                    </div>

                    <div class="row widget-container" data-bind="if: graph.ontology_id()">
                        <div class="form-group">
                            <div class="relative">
                                <label class="col-xs-12 control-label widget-input-label"> {% trans "Root Class" %} </label>
                            </div>

                            <div class="col-xs-12 crm-selector">
                                <select class="design" data-bind="attr: {'disabled': graphSettingsViewModel.nodeCount() > 1 }, value: graphSettingsViewModel.ontologyClass, valueAllowUnset: false, options: ontologyClasses, optionsText: 'display', optionsValue:'source', chosen: {disable_search_threshold: 10, width: '500px', search_contains: true}"></select>
                            </div>
                        </div>
                    </div>

                </form>
            </div>

            <div class="graph-designer-header">{% trans 'Configuration' %}</div>
            <div id="meta-card" class="graph-settings-panel-body fade in">

                <form class="widgets">
                    <!-- ko ifnot: graph.isresource() -->
                    <div class="row widget-container data-type">
                        <div class="form-group">
                            <div class="relative">
                                <label class="col-xs-12 control-label widget-input-label">
                                    {% trans "Root Node Data Type" %}
                                </label>
                            </div>

                            <div class="col-xs-12 crm-selector">
                                <select class="design" data-bind="value: graphSettingsViewModel.graph.root.datatype, options: datatypes, optionsCaption: {% quoted_trans 'Choose a data type' %}, chosen: {disable_search_threshold: 10, width: '500px'}"></select>
                            </div>
                        </div>
                    </div>

                    <!-- ko if: graphSettingsViewModel.rootnode.datatypeConfigComponent -->
                    <div class="row widget-container data-type-config">
                        <div class="form-group">
                            <div class="col-xs-12 crm-selector">
                                <div data-bind='component: {
                                    name: graphSettingsViewModel.rootnode.datatypeConfigComponent,
                                    params: graphSettingsViewModel.extendNode(graphSettingsViewModel.rootnode, {isEditable: true})}' style="width: 500px;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /ko -->

                    <div class="row widget-container graph-settings-switch">
                        <div class="form-group">
                            <div class="relative">
                                <label class="col-xs-12 control-label widget-input-label">
                                    <span class="switch switch-small arches-switch on disabled"><small></small></span>
                                </label>
                            </div>
                            <div class="col-xs-12">
                                <p class="control-label graph-settings-switch-label">
                                    <span>{% trans "Make card" %}</span>
                                </p>
                                <span class="graph-settings-switch-subtitle">
                                    {% trans "Data from nodes not collected in other cards will be collected in the root card's form section" %}
                                </span>
                            </div>
                        </div>
                    </div>
                    <!-- /ko -->
                    <!-- ko if: graph.isresource() -->
                    <div class="row widget-container">
                        <div class="form-group">
                            <div class="relative">
                                <label class="col-xs-12 control-label widget-input-label"> {% trans "Resource models that may be related:" %}</label>
                            </div>

                            <div class="col-xs-12">
                                <div class="columns">
                                    <!-- ko foreach: graphSettingsViewModel.relatable_resources -->
                                    <label class="form-checkbox form-normal form-primary" data-bind="css: {'form-text': true,  'active': isRelatable()}, click: function () {$data.isRelatable(!$data.isRelatable())}">
                                        <input type="checkbox" data-bind="checked:isRelatable">
                                        <!-- ko if: graph.graphid === $parent.graph.graphid() -->
                                        <span data-bind="text: $parent.graph.name"></span>
                                        <!-- /ko -->
                                        <!-- ko if: graph.graphid !== $parent.graph.graphid() -->
                                        <span data-bind="text: graph.name"></span>
                                        <!-- /ko -->
                                    </label>
                                    <!-- /ko -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /ko -->
                </form>
            </div>

            <div class="graph-designer-header">{% trans 'Description' %}</div>
            <div id="desc-card" class="graph-settings-panel-body fade in">

                <form class="widgets" style="margin-bottom: 20px;">
                    <div class="row widget-container">
                        <div class="form-group">
                            <div class="relative">
                                <label class="col-xs-12 control-label widget-input-label"> {% trans "Author" %}</label>
                            </div>

                            <div class="col-xs-12">
                                <input placeholder="{% trans "Author name" %}" class="form-control input-md widget-input" data-bind="value:graph.author, valueUpdate: 'keyup'">
                            </div>
                        </div>
                    </div>

                    <div class="row widget-container">
                        <div class="form-group">
                            <div class="relative">
                                <label class="col-xs-12 control-label widget-input-label"> {% trans "Abstract" %}</label>
                            </div>

                            <div class="col-xs-12">
                                <textarea placeholder="{% trans "Abstract/description" %}" rows="6" class="form-control" data-bind="value:graph.description, valueUpdate: 'keyup'"></textarea>
                            </div>
                        </div>
                    </div>
                    <!-- ko if: graph.isresource() -->
                    <div class="row widget-container">
                        <div class="form-group">
                            <div class="relative">
                                <label class="col-xs-12 control-label widget-input-label"> {% trans "JSON-LD Context" %}</label>
                            </div>

                            <div class="col-xs-12">
                                <textarea placeholder="{% trans "URI to a JSON-LD Context Object or a Raw Context Object or Array of Context Objects" %}" class="form-control input-md widget-input" data-bind="textInput:graph.jsonldcontext"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="row widget-container">
                        <div class="form-group">
                            <div class="relative">
                                <label class="col-xs-12 control-label widget-input-label"> {% trans "URI Slug for API Access" %} </label>
                            </div>

                            <div class="col-xs-12">
                                <input placeholder="{% trans "Slug" %}" class="form-control input-md widget-input" data-bind="textInput:graph.slug">
                            </div>
                        </div>
                    </div>
                    <!-- /ko -->
                </form>
            </div>

            <div class="graph-designer-header">{% trans 'Appearance' %}</div>
            <div class="graph-settings-panel-body fade in">

                <form class="widgets">
                    <!-- ko if: graph.isresource() -->
                    <div class="row widget-container">
                        <div class="form-group">

                            <div class="relative">
                                <label class="col-xs-12 control-label widget-input-label"> {% trans "Color" %} </label>
                            </div>

                            <div class="colorpicker-component input-group" id="cp1">
                                <input placeholder="{% trans " Map Feature Color " %}" class="form-control input-md widget-input" data-bind="colorPicker: {color: graph.color, format:'rgba', container: '#cp1'}">
                                <span class="input-group-addon"><i class="ion-stop resource-color-swatch" data-bind="style: {color: graph.color}"></i></span>
                            </div>

                        </div>
                    </div>
                    <!-- /ko -->
                    <div class=" row widget-container">
                        <div class="form-group">
                            <div data-bind="component: {
                                name: 'views/components/icon-selector',
                                params: {
                                    selectedIconObservable: graph.iconclass,
                                    iconFilter: graphSettingsViewModel.iconFilter,
                                    iconList: graphSettingsViewModel.icons,
                                    label: {% quoted_trans "Selected icon:" %}
                                }
                            }">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
