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

<!-- Title Block -->
<div>
    <div class="panel-section-title dark-colored-text">
        {% trans "Card Configuration" %}
    </div>
</div>

<!-- Tabs Content -->
<div class="tab-content listing-container form-divider">

    <!-- Card Container Base Settings Form -->
    <div id="card-crud-settings" class="tab-pane fade in active">
        <div class="node-config-item">
            <div class="control-label">
                {% trans "Card Type" %}
            </div>
            <div>
                <select class="resources" data-bind="value: model.component_id, options: $parent.cardComponents, optionsText: 'name', optionsValue: 'componentid', optionsCaption: {% quoted_trans "Choose a card component..." %}, chosen: {disable_search_threshold: 10, width: '100%'}"></select>
            </div>
        </div>

        <div class="">
            <div class="node-config-item">
                <div class="control-label">
                    {% trans "Card Title" %}
                </div>
                <div>
                    <input type="" placeholder="{% trans "Card name" %}" class="form-control input-md widget-input" data-bind="textInput: model.name">
                </div>
            </div>

            <div class="node-config-item">
                <div class="control-label">
                    {% trans "Subtitle" %}
                </div>
                <div>
                    <input type="" placeholder="{% trans " " %}" class="form-control input-md widget-input" data-bind="textInput: model.instructions">
                </div>
            </div>

            <div class="node-config-item">
                <div class="control-label">
                    {% trans "CSS Classes (Optional)" %}
                </div>
                <div>
                    <input type="" placeholder="{% trans " " %}" class="form-control input-md widget-input" data-bind="textInput: model.cssclass">
                </div>
            </div>

        </div>

        <div>
            <!-- ko component: {
                name: model.cardComponentLookup[model.component_id()].componentname,
                params: {
                    state: 'config',
                    preview: self.preview,
                    card: $data,
                    pageVm: $root
                }
            } --> <!-- /ko -->
        </div>

        <!-- Settings -->
        <div>
            <div class="panel-section-title dark-colored-text pad-top">
                {% trans "Settings" %}
            </div>

            <div class="form-divider">
                <!-- Card Visibility -->
                <div class="pad-top" data-bind="component: { name: 'views/components/simple-switch', params: {value: model.visible, config:{label: {% quoted_trans "Make Card Visible" %}, subtitle: {% quoted_trans "Show this card by default" %}}}}"></div>

                <!-- Multiple values tools -->
                <div class="cardinality-form" data-bind="visible: model.cardinality() === 'n'" style="display: none;">
                </div>

                <!-- Enable help -->
                <div data-bind="component: { name: 'views/components/simple-switch', params: {value: model.helpenabled, config:{label: {% quoted_trans "Enable Card-level help" %}, subtitle: {% quoted_trans "Provide specific user guidance for this card" %}}}}"></div>

                <!-- Tertiary Panel For Card Help Text-->
                <div class="" style="display: none;" data-bind="visible: model.helpenabled">
                    <div class="tertiary-panel-content">

                        <!-- Help CRUD -->
                        <div class="pad-all">
                            <div class="node-widget-label">
                                <div class="control-label">
                                    {% trans "Help Panel Title" %}
                                </div>
                                <div class="col-sm-12 pad-no crud-widget-container">
                                    <input type="" placeholder="{% trans "Help title" %}" class="form-control input-md widget-input" data-bind='textInput: model.helptitle'>
                                </div>
                            </div>

                            <!--Rich text editor-->
                            <div class="node-widget-label">
                                <div class="control-label">
                                    {% trans "Content" %}
                                </div>
                                <textarea rows="10" cols="80" data-bind="ckeditor: model.helptext, ckeditorOptions: {}, valueUpdate: 'afterkeydown'"></textarea>
                            </div>


                        </div>
                    </div>
                </div>


                <!--ko if: model.widgets().length > 0 -->
                <div class="panel-section-title dark-colored-text pad-top">
                    {% trans "Unique Values" %}
                </div>

                <div class="form-divider">
                    <!--ko if: model.constraints().length > 0 -->
                    <div class="constraint-selection" data-bind="foreach: {data: model.constraints(), as: 'constraintvm'}">
                        <div class="dropdown">
                            <select class="" style="display:inline-block;"
                            data-bind="select2Query: {
                                select2Config: getSelect2ConstraintConfig({% quoted_trans "Select Nodes" %})
                            }"></select>
                        </div>
                        <div data-bind="component: { name: 'views/components/simple-switch', params: {value: constraintvm.constraint.uniquetoallinstances, config:{label: 'Unique to all resource instances?'}}}"></div>
                    </div>
                    <!--/ko-->
                </div>
                <!--/ko-->

            </div>
        </div>
    </div>
</div>
