{% load i18n %}

<div class="workflow-select-plugin">

    <!-- Modal -->
    <!-- ko if: shouldShowIncompleteWorkflowsModal() -->
    <div class="workflow-incomplete-modal-background" role="presentation" data-bind="event: { keydown: $data.handleModalKeydown }">
        <div class="workflow-incomplete-modal-container" role="dialog" aria-modal="true" aria-labelledby="workflow-modal-title" aria-describedby="workflow-modal-description" data-bind="style: {maxWidth: $data.requestingUserIsSuperuser() ? '1200px' : '1000px'}">
            <div class="workflow-incomplete-modal-banner">
                <button
                    id="close-workflow-modal-btn"
                    aria-label="{% trans 'Close Incomplete Workflow Modal' %}"
                    tabindex="0"
                    class="close fa fa-times" style="font-size: 20px; cursor: pointer;"
                    data-bind="click: function(){
                        $data.shouldShowIncompleteWorkflowsModal(false);
                        $root.shiftFocus('#show-workflow-modal-btn');
                    }"
                ></button>
            </div>
            <div class="workflow-incomplete-modal-title">
                <h2 id="workflow-modal-title">{% trans 'Incomplete Workflows' %}</h2>
                <p id="workflow-modal-description">
                    {% trans 'Please either complete or delete the workflows listed below.' %}
                </p>
            </div>

            <div class="workflow-incomplete-modal-table">
                <table class="table table-striped" role="table" aria-label="{% trans 'Incomplete Workflows' %}" style="border: 1px solid #ddd;">
                    <thead>
                        <tr role="row" style="display: flex; justify-content: space-between;">
                            <th role="columnheader" style="flex-grow: 1; max-width: 200px;">
                                {% trans 'Created' %}
                            </th>
                            <!-- ko if: requestingUserIsSuperuser() -->
                                <th role="columnheader" style="flex-grow: 1; max-width: 200px;">
                                    {% trans 'User' %}
                                </th>
                            <!-- /ko -->
                            <th role="columnheader" style="flex-grow: 2; max-width: 400px;">
                                {% trans 'Workflow Name' %}
                            </th>
                            <th role="columnheader" style="flex-grow: 1; max-width: 200px;">
                                {% trans 'Link' %}
                            </th>
                        </tr>
                    </thead>
                    <tbody role="rowgroup" style="display:block; overflow:auto; max-height:200px; width:100%;">
                        <!-- ko foreach: $data.incompleteWorkflows -->
                        <tr role="row" style="display: flex; justify-content: space-between;">
                            <td role="cell" style="flex-grow: 1; max-width: 200px;" data-bind="text: $data.created"></td>
                            <!-- ko if: $parent.requestingUserIsSuperuser() -->
                                <td role="cell" style="flex-grow: 1; max-width: 200px;" data-bind="text: $data.username"></td>
                            <!-- /ko -->
                            <td role="cell" style="flex-grow: 2; max-width: 400px;" data-bind="text: $data.pluginname"></td>
                            <td role="cell" style="flex-grow: 1; max-width: 200px;">
                                <a 
                                    data-bind="attr: {'href': `/plugins/${$data.workflowname}?workflow-id=${$data.workflowid}`}"
                                    class="workflow-link"
                                >{% trans 'Go to Workflow' %}</a>
                            </td>
                        </tr>
                        <!-- /ko -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- /ko -->

    <div>
        <div class="workflow-modal-buttons">
            <!-- Modal button -->
            <button 
                id="show-workflow-modal-btn"
                class="btn btn-info btn-sm"
                style="margin: 5px; border-radius: 4px;"
                data-bind="
                    enable: $data.incompleteWorkflows().length,
                    click: function(){
                        $data.shouldShowIncompleteWorkflowsModal(true);
                    }
                "
            >
                {% trans 'Show Incomplete Workflows' %}
            </button>

            <!-- Workflow Help button -->
            <button
                id="show-workflow-help-btn"
                class="btn btn-info btn-sm"
                style="margin: 5px; margin-right: 10px; margin-left: 0px; border-radius: 4px;"
                data-bind="click: function(){
                    $data.shouldShowWorkflowHelp(true);
                    $root.shiftFocus('#close-workflow-help-btn');
                }
                "
            >
                {% trans 'Show Workflow Help' %}
            </button>
        </div>

        <!-- ko if: $data.shouldShowWorkflowHelp() -->
        <div id="ep-help-panel" 
            class="ep-help" 
            role="region"
            aria-labelledby="workflow-help-title"
            style="display: flex; flex-direction: column; height: 100%;"
        >
            <div class="ep-edits-header">
                <div class="ep-help-title">
                    <span id="workflow-help-title">{% trans "Workflow Guidance" %}</span>
                </div>
                <button
                    id="close-workflow-help-btn"
                    type="button"
                    aria-label="{% trans 'Close help panel' %}"
                    class="ep-help-toggle ep-help-close ep-tools ep-tools-right" 
                    style="border:none; box-sizing: content-box; padding: 0px 15px; background: #f1f1f1; cursor: pointer;"
                    data-bind="click: function(){
                        shouldShowWorkflowHelp(false); 
                        selectedHelpTemplate(null);
                        $root.shiftFocus('#show-workflow-help-btn');
                    }"
                >
                    <span class="" data-placement="bottom" data-toggle="tooltip" data-original-title="{% trans "Close Help" %}">
                        <i class="fa fa-times-circle fa-lg" aria-hidden="true"></i>
                    </span>
                </button>
            </div>


            <div style="padding: 20px;">
                <label for="workflow-help-select" class="sr-only">{% trans "Select A Workflow" %}</label>
                <select
                    id="workflow-help-select"
                    aria-label="{% trans 'Select A Workflow' %}"
                    data-bind="
                        select2Query: {
                            select2Config: {
                                clickBubble: false,
                                disabled: false,
                                data: $data.helpTemplateData,
                                value: selectedHelpTemplate,
                                dropdownCssClass: 'select2-zindex',
                                closeOnSelect: true,
                                allowClear: true,
                                multiple: false,
                                placeholder: '{% trans "Select A Workflow" %}'
                            }
                        }
                    "
                ></select>
            </div>
            
            <!-- ko if: $data.helpTemplateHtml() -->
                <!-- ko if: $data.isHelpTemplateLoading() -->
                    <div class="loading-mask" role="status" aria-live="polite" aria-label="{% trans 'Loading workflow help content' %}" style="bottom: unset; right: unset; left: 30%">
                        <span class="sr-only">{% trans 'Loading...' %}</span>
                    </div>
                <!-- /ko -->
                <div
                    role="region"
                    aria-live="polite"
                    aria-label="{% trans 'Workflow help content' %}"
                    style="width: 100%; flex: 1; overflow: auto; padding: 0px 10px 0px 10px;"
                    data-bind="
                        style: { visibility: $data.isHelpTemplateLoading() ? 'hidden' : 'visible' },
                        html: $data.helpTemplateHtml()
                    "
                ></div>
            <!-- /ko -->
        </div>
        <!-- /ko -->
    </div>

    <div class="workflow-layout-afher">
        <div>
            <h2 class="workflow-select-card-container-title">Create New...</h2>
        </div>

        <div class="workflow-select-card-container">
            <!-- ko foreach: {data: workflows, as: 'workflow'} -->
            <a data-bind="attr: {href: workflow.url, 'aria-label': workflow.name}" href="#"><div data-bind="style: {'background-color': workflow.config.thumbnailBackgroundColor}" class="workflow-select-card">
                <h4 class="workflow-select-title" data-bind="text: workflow.name"></h4>
                <div data-bind="style: {'background-color': workflow.config.thumbnailCircleColor}" class="workflow-select-wf-circle">
                    <span><i data-bind="attr:{class: ('fa '+workflow.icon +' workflow-select-wf-icon')}"></i></span>
                </div>
                <p data-bind="text: workflow.config.description" class="workflow-select-desc"></p>
            </div></a>
            <!-- /ko -->
        </div>
    </div>
</div>