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

<div class="workflow-plugin">
    <!-- ko if: ko.unwrap(activeStep) -->
    <div class="tabbed-workflow">

        <div class="tabbed-workflow-title-bar">
            <div class="workflow-name-container">
                <div class="workflow-name" data-bind="text: workflowName()">{% trans "Insert Workflow Name" %}</div>
            </div>

            <div class="workflow-top-control">
                <!-- ko if: (activeStep()._index === steps().length - 1) || isWorkflowFinished() -->
                <button 
                    data-bind="click: finishWorkflow"
                    class="btn btn-success"
                >
                <i class="fa fa-check"></i>
                <span class="verbose">
                    {% trans "Save and Complete Workflow" %}
                </span>
                <span class="succinct">
                    {% trans "Complete" %}
                </span>
                </button>
                <!-- /ko -->
                <button 
                    data-bind="click: quitWorkflow" 
                    class="btn btn-danger"
                >
                    <i class=" ion-android-cancel"></i>
                    <span>
                        {% trans "Delete" %}
                    </span>
                </button>
            </div>
        </div>
        
        <div class="workflow-nav-tab-container" data-bind="gallery: pan, duration: 400, thumbnailclass: 'workflow-nav-tabs'">
            <div class="workflow-tab-controls right" data-bind="click: function(){ updatePan('left') }"><i class="fa fa-angle-left"></i></div>
                <div class="workflow-nav-tabs">
                    <ul class="nav nav-tabs workflow-nav-tab-list">
                        <!--ko foreach: {data: $data.steps(), as: 'step'} -->
                            <li 
                                class="workflow-nav-tab-list-item" 
                                data-bind="
                                    css: { active: step.active() },
                                    container: '.workflow-nav-tab-container',
                                    scrollDirection: 'horizontal',
                                    scrollTo: step.active(),
                                "
                            >
                                <div
                                    class='workflow-nav-tab'
                                    data-bind="{
                                        css: { 
                                            active: step.active(), 
                                            inactive: (
                                                !step.active() 
                                                && (
                                                    step.complete()
                                                    || ( step._index <= $parent.furthestValidStepIndex() )
                                                )

                                            ),
                                            disabled: (
                                                !step.active() 
                                                && step._index > $parent.furthestValidStepIndex()
                                            ),
                                        },
                                        click: function() { 
                                            if (
                                                !step.active() 
                                                && step._index <= $parent.furthestValidStepIndex()
                                            ) { 
                                                $parent.activeStep(step) 
                                            }
                                        },
                                    }" 
                                >
                                    <div style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                                        <span
                                            style="margin-right: 4px;"
                                            class="workflow-nav-tab-arrow"
                                            data-bind="{
                                                css: {
                                                    disabled: $parent.activeStep()._index === 0,
                                                },
                                                visible: step.active() && step._index !== 0,
                                            }"
                                        >
                                            <i class="fa fa-caret-left"></i>
                                        </span>

                                        <span style="font-size: 14px;" data-bind="text: ko.unwrap(step.title)"></span>

                                        <span
                                            style="margin-left: 4px;"
                                            class="workflow-nav-tab-arrow"
                                            data-bind="{
                                                css: {
                                                    disabled: (
                                                        ( $parent.activeStep() && $parent.activeStep().required() && !$parent.activeStep().complete() )
                                                    ),
                                                },
                                                visible: step.active() && step._index !== $parent.steps().length - 1,
                                            }"
                                        >
                                            <i class="fa fa-caret-right"></i>
                                        </span>
                                    </div>
                                </div>
                            </li>
                        <!-- /ko -->
                    </ul>
                </div>
            <div class="workflow-tab-controls left" data-bind="click: function(){ updatePan('right') }"><i class="fa fa-angle-right"></i></div>
        </div>
        <div class="workflow-step-title">
            <h2>
                <i class="fa fa-list-ol text-center icon-wrap bg-gray ep-graph-title-icon"></i>
                <span data-bind="text: activeStep().title"></span>
            </h2>
        </div>
        <div class="tabbed-workflow-step-container">
            <!-- ko component: {
                name: 'workflow-step',
                params: {
                    ...$data,
                    step: $data.activeStep(),
                }
            } --><!-- /ko -->
        </div>

        <div class="tabbed-workflow-footer">

            <div class="tabbed-workflow-footer-button-container">
                <!-- ko if: activeStep()._index > 0 -->
                <button 
                    class="btn btn-primary"
                    data-bind="click: back"
                >
                    <i class="fa fa-caret-left"></i>
                    <span class="verbose">
                        {% trans  "Previous Step" %}
                    </span>
                    <span class="succinct">
                        {% trans  "Previous" %}
                    </span>
                </button>
                <!-- /ko -->
                <!-- ko if: activeStep().hasUnsavedData() -->
                    <!-- ko if: !$data.hiddenWorkflowButtons().includes('undo') && !activeStep().saveWithoutProgressing()  -->
                    <button
                        class="btn btn-danger static-save-button"
                        data-bind="{
                            css: {
                                disabled: !activeStep().hasUnsavedData(),
                            },
                            click: activeStep().undo
                        }"
                    >
                        <i class="fa fa-undo"></i>
                        <span>
                            {% trans  "Undo" %}
                        </span>
                    </button>
                    <!-- /ko -->
                    <!-- ko if: !$data.hiddenWorkflowButtons().includes('save') -->
                        <!-- ko if: activeStep().saveWithoutProgressing() -->
                            <button
                                class="btn btn-success"
                                data-bind="
                                    click: $data.staticSaveActiveStep
                                "
                            >
                                <i class="ion-android-cloud-done"></i>
                                <span class="verbose">
                                        {% trans "Save" %}
                                </span>
                                <span class="succinct">
                                    {% trans  "Save" %}
                                </span>
                            </button>
                        <!-- /ko -->
                        <!-- ko ifnot: activeStep().saveWithoutProgressing() -->
                            <button
                                class="btn btn-success"
                                data-bind="
                                    click: $data.saveActiveStep
                                "
                            >
                                <i class="ion-android-cloud-done"></i>
                                <span class="verbose">
                                    {% trans  "Save and Continue" %}
                                </span>
                                <span class="succinct">
                                    {% trans  "Next" %}
                                </span>
                                <i class="fa fa-caret-right"></i>
                            </button>
                        <!-- /ko -->
                    <!-- /ko -->
                    <!-- ko if: $data.hiddenWorkflowButtons().includes('save') || activeStep().saveWithoutProgressing() -->
                        <!-- ko if: activeStep()._index < steps().length - 1 -->
                        <button
                            class="btn btn-primary"
                            data-bind="
                                click: next,
                                css: {
                                    disabled: activeStep().required() && !activeStep().complete(),
                                }
                            "
                        >
                            <span class="verbose">
                                {% trans  "Next Step" %}
                            </span>
                            <span class="succinct">
                                {% trans  "Next" %}
                            </span>
                            <i class="fa fa-caret-right"></i>
                        </button>
                        <!-- /ko -->
                    <!-- /ko -->
                <!-- /ko -->
                <!-- ko ifnot: activeStep().hasUnsavedData() -->
                    <!-- ko if: activeStep()._index < steps().length - 1 -->
                    <button
                        class="btn btn-primary"
                        data-bind="
                            click: next,
                            css: {
                                disabled: activeStep().required() && !activeStep().complete(),
                            }
                        "
                    >
                        <span class="verbose">
                            {% trans  "Next Step" %}
                        </span>
                        <span class="succinct">
                            {% trans  "Next" %}
                        </span>
                        <i class="fa fa-caret-right"></i>
                    </button>
                    <!-- /ko -->
                <!-- /ko -->
            </div>


            <div class="step-metadata">
                <div class="step-counter">
                    <span 
                        style="padding-right: 2px;"
                        data-bind="text:activeStep()['_index'] + 1"
                    ></span>
                    <span data-bind="text:'/ ' + steps().length"></span>
                    
                </div>
    
                <!--ko if: ko.unwrap(activeStep().informationBoxData) -->
                <div
                    data-bind="{
                        component: { 
                            name: 'views/components/simple-switch', 
                            params: {
                                value: activeStep().informationBoxData()['displayed'], 
                                config:{
                                    label: {% quoted_trans "Show Step Information" %},
                                    setvalue: activeStep().toggleInformationBox,
                                    getvalue: activeStep().informationBoxData()['displayed'],
                                }
                            }
                        }
                    }"
                ></div>
                <!-- /ko -->
            </div>



        </div>
    </div>
    <!-- /ko -->
</div>