<div ng-show="nodeFormDataLoaded">
    <div class="WorkflowMaker-formTitle">{{nodeConfig.mode === 'edit' ? nodeConfig.node.fullUnifiedJobTemplateObject.name || nodeConfig.node.unifiedJobTemplate.name : strings.get('workflow_maker.ADD_A_TEMPLATE')}}</div>
    <div class="Form-tabHolder" ng-show="!readOnly">
        <div class="Form-tab WorkflowMaker-formTab" ng-class="{'is-selected': activeTab === 'jobs'}" ng-click="activeTab = 'jobs'">{{strings.get('workflow_maker.JOBS')}}</div>
        <div class="Form-tab WorkflowMaker-formTab" ng-class="{'is-selected': activeTab === 'project_syncs'}" ng-click="activeTab = 'project_syncs'">{{strings.get('workflow_maker.PROJECT_SYNC')}}</div>
        <div class="Form-tab WorkflowMaker-formTab" ng-class="{'is-selected': activeTab === 'inventory_syncs'}" ng-click="activeTab = 'inventory_syncs'">{{strings.get('workflow_maker.INVENTORY_SYNC')}}</div>
    </div>
    <div class="WorkflowMaker-formLists" ng-show="!readOnly">
        <div id="workflow-jobs-list" ng-show="activeTab === 'jobs'">
            <div ng-hide="wf_maker_templates.length === 0 && (searchTags | isEmpty)">
                <smart-search django-model="wf_maker_templates" base-path="unified_job_templates" iterator="wf_maker_template" dataset="wf_maker_template_dataset" list="templateList" collection="wf_maker_templates" default-params="wf_maker_template_default_params" query-set="wf_maker_template_queryset" search-bar-full-width="true" search-tags="searchTags">
                </smart-search>
            </div>

            <div class="row" ng-show="wf_maker_templates.length === 0 && !(searchTags | isEmpty)">
                <div class="col-lg-12 List-searchNoResults" translate>No records matched your search.</div>
            </div>
            <div class="List-noItems" ng-show="wf_maker_templates.length === 0 && (searchTags | isEmpty)">PLEASE ADD ITEMS TO THIS LIST</div>
            <div class="list-table-container" ng-show="wf_maker_templates.length > 0">
                <table id="templates_table" class="List-table" is-extended="false">
                    <thead>
                        <tr class="List-tableHeaderRow">
                            <th class="List-tableHeader select-column List-staticColumn--smallStatus" translate=""></th>
                            <th class="col-md-8" base-path="unified_job_templates" collection="wf_maker_templates" dataset="wf_maker_template_dataset" column-sort="" column-field="name" column-iterator="wf_maker_template" column-no-sort="undefined" column-label="Name" column-custom-class="" query-set="wf_maker_template_queryset">
                            </th>
                            <th class="List-tableHeader--info col-md-3" base-path="unified_job_templates" collection="wf_maker_templates" dataset="wf_maker_template_dataset" column-sort="" column-field="info" column-iterator="wf_maker_template" column-no-sort="true" column-label="" column-custom-class="" query-set="wf_maker_template_queryset">
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-class="[template.success_class, {'List-tableRow--selected' : $stateParams['template_id'] == wf_maker_template.id}, {'List-tableRow--disabled': !wf_maker_template.summary_fields.user_capabilities.edit}]" id="{{ wf_maker_template.id }}" class="List-tableRow template_class" disable-row="{{ !wf_maker_template.summary_fields.user_capabilities.edit }}" ng-repeat="wf_maker_template in wf_maker_templates">
                            <td class="List-tableCell">
                                <input type="radio" ng-model="wf_maker_template.checked" ng-value="1" ng-false-value="0" name="check_template_{{wf_maker_template.id}}" ng-click="toggle_row(wf_maker_template)" ng-disabled="!wf_maker_template.summary_fields.user_capabilities.edit">
                            </td>
                            <td class="List-tableCell name-column col-md-8" ng-click="toggle_row(wf_maker_template)">
                                {{wf_maker_template.name}}
                                <span class="at-RowItem-tag" ng-show="wf_maker_template.type === 'workflow_job_template'">
                                    {{:: strings.get('workflow_maker.WORKFLOW') }}
                                </span>
                            </td>
                            <td class="col-md-3" ng-include="'/static/partials/job-template-details.html'"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <paginate base-path="unified_job_templates" collection="wf_maker_templates" dataset="wf_maker_template_dataset" iterator="wf_maker_template" query-set="wf_maker_template_queryset" hide-view-per-page="true" max-visible-pages="5"></paginate>
        </div>
        <div id="workflow-project-sync-list" ng-show="activeTab === 'project_syncs'">
            <div ng-hide="wf_maker_projects.length === 0 && (searchTags | isEmpty)">
                <smart-search django-model="wf_maker_projects" base-path="projects" iterator="wf_maker_project" dataset="wf_maker_project_dataset" list="projectList" collection="wf_maker_projects" default-params="wf_maker_project_default_params" query-set="wf_maker_project_queryset" search-bar-full-width="true" search-tags="searchTags">
                </smart-search>
            </div>

            <div class="row" ng-show="wf_maker_projects.length === 0 && !(searchTags | isEmpty)">
                <div class="col-lg-12 List-searchNoResults" translate>No records matched your search.</div>
            </div>
            <div class="List-noItems" ng-show="wf_maker_projects.length === 0 && (searchTags | isEmpty)">No Projects Have Been Created</div>
            <div class="list-table-container" ng-show="wf_maker_projects.length > 0">
                <table id="projects_table" class="List-table" is-extended="false">
                    <thead>
                        <tr class="List-tableHeaderRow">
                            <th class="List-tableHeader select-column List-staticColumn--smallStatus" translate=""></th>
                            <th base-path="projects" collection="wf_maker_projects" dataset="wf_maker_project_dataset" column-sort="" column-field="name" column-iterator="wf_maker_project" column-no-sort="undefined" column-label="Name" column-custom-class="col-md-8" query-set="wf_maker_project_queryset">
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-class="[wf_maker_project.success_class, {'List-tableRow--selected' : $stateParams['project_id'] == wf_maker_project.id}]" id="{{ wf_maker_project.id }}" class="List-tableRow project_class" ng-repeat="wf_maker_project in wf_maker_projects">
                            <td class="List-tableCell">
                                <input type="radio" ng-model="wf_maker_project.checked" ng-value="1" ng-false-value="0" name="check_project_{{wf_maker_project.id}}" ng-click="toggle_row(wf_maker_project)" ng-disabled="undefined">
                            </td>
                            <td class="List-tableCell name-column col-md-8" ng-click="toggle_row(wf_maker_project)">
                                {{ wf_maker_project.name }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <paginate base-path="projects" collection="wf_maker_projects" dataset="wf_maker_project_dataset" iterator="wf_maker_project" query-set="wf_maker_project_queryset" hide-view-per-page="true" max-visible-pages="5"></paginate>
        </div>
        <div id="workflow-inventory-sync-list" ng-show="activeTab === 'inventory_syncs'">
            <div ng-hide="wf_maker_inventory_sources.length === 0 && (searchTags | isEmpty)">
                <smart-search django-model="wf_maker_inventory_sources" base-path="inventory_sources" iterator="wf_maker_inventory_source" dataset="wf_maker_inventory_source_dataset" list="inventorySourceList" collection="wf_maker_inventory_sources" default-params="wf_maker_inventory_source_default_params" query-set="wf_maker_inventory_source_queryset" search-bar-full-width="true" search-tags="searchTags">
                </smart-search>
            </div>

            <div class="row" ng-show="wf_maker_inventory_sources.length === 0 && !(searchTags | isEmpty)">
                <div class="col-lg-12 List-searchNoResults" translate>No records matched your search.</div>
            </div>
            <div class="List-noItems" ng-show="wf_maker_inventory_sources.length === 0 && (searchTags | isEmpty)">PLEASE ADD ITEMS TO THIS LIST</div>
            <div class="list-table-container" ng-show="wf_maker_inventory_sources.length > 0">
                <table id="workflow_inventory_sources_table" class="List-table" is-extended="false">
                    <thead>
                        <tr class="List-tableHeaderRow">
                            <th class="List-tableHeader select-column List-staticColumn--smallStatus" translate=""></th>
                            <th base-path="inventory_sources" collection="wf_maker_inventory_sources" dataset="wf_maker_inventory_source_dataset" column-sort="" column-field="name" column-iterator="wf_maker_inventory_source" column-no-sort="undefined" column-label="Name" column-custom-class="" query-set="wf_maker_inventory_source_queryset">
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-class="[wf_maker_inventory_source.success_class, {'List-tableRow--selected' : $stateParams['inventory_source_id'] == wf_maker_inventory_source.id}]" id="{{ wf_maker_inventory_source.id }}" class="List-tableRow inventory_source_class" ng-repeat="wf_maker_inventory_source in wf_maker_inventory_sources">
                            <td class="List-tableCell">
                                <input type="radio" ng-model="wf_maker_inventory_source.checked" ng-value="1" ng-false-value="0" name="check_inventory_source_{{wf_maker_inventory_source.id}}" ng-click="toggle_row(wf_maker_inventory_source)" ng-disabled="undefined">
                            </td>
                            <td class="List-tableCell name-column col-md-11" ng-click="toggle_row(wf_maker_inventory_source)">
                                <span aw-tool-tip="Inventory: {{wf_maker_inventory_source.summary_fields.inventory.name}}" data-placement="top">{{ wf_maker_inventory_source.name }}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <paginate base-path="inventory_sources" collection="wf_maker_inventory_sources" dataset="wf_maker_inventory_source_dataset" iterator="wf_maker_inventory_source" query-set="wf_maker_inventory_source_queryset" hide-view-per-page="true" max-visible-pages="5"></paginate>
        </div>
    </div>
    <div ng-if="selectedTemplate && selectedTemplateInvalid">
        <div class="WorkflowMaker-invalidJobTemplateWarning">
            <span class="fa fa-warning"></span>
            <span>{{:: strings.get('workflows.INVALID_JOB_TEMPLATE') }}</span>
        </div>
    </div>
    <div ng-if="selectedTemplate && credentialRequiresPassword">
        <div class="WorkflowMaker-invalidJobTemplateWarning">
            <span class="fa fa-warning"></span>
            <span>{{:: strings.get('workflows.CREDENTIAL_WITH_PASS') }}</span>
        </div>
    </div>
    <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-show="nodeConfig.mode === 'add'">
        <label for="edgeType" class="Form-inputLabelContainer">
            <span class="Form-requiredAsterisk">*</span>
            <span class="Form-inputLabel">{{:: strings.get('workflow_maker.RUN') }}</span>
        </label>
        <div>
            <select
                id="workflow_node_edge"
                ng-options="v as v.label for v in edgeTypeOptions track by v.value"
                ng-model="edgeType"
                class="form-control Form-dropDown"
                name="edgeType"
                tabindex="-1"
                ng-disabled="readOnly"
                aria-hidden="true">
            </select>
        </div>
    </div>
    <div ng-show="readOnly">
        <div
            class="WorkflowMaker-readOnlyPromptText"
            ng-show="nodeConfig.node.originalNodeObject.job_type !== null ||
                     (promptData.prompts.credentials.value && promptData.prompts.credentials.value.length > 0) ||
                     nodeConfig.node.originalNodeObject.inventory !== null ||
                     nodeConfig.node.originalNodeObject.limit !== null ||
                     nodeConfig.node.originalNodeObject.verbosity !== null ||
                     nodeConfig.node.originalNodeObject.job_tags !== null ||
                     nodeConfig.node.originalNodeObject.skip_tags !== null ||
                     nodeConfig.node.originalNodeObject.diff_mode !== null ||
                     showExtraVars">
            {{:: strings.get('workflow_maker.READ_ONLY_PROMPT_VALUES')}}
        </div>
        <div
            class="WorkflowMaker-readOnlyPromptText"
            ng-show="!(nodeConfig.node.originalNodeObject.job_type !== null ||
                     (promptData.prompts.credentials.value && promptData.prompts.credentials.value.length > 0) ||
                     nodeConfig.node.originalNodeObject.inventory !== null ||
                     nodeConfig.node.originalNodeObject.limit !== null ||
                     nodeConfig.node.originalNodeObject.verbosity !== null ||
                     nodeConfig.node.originalNodeObject.job_tags !== null ||
                     nodeConfig.node.originalNodeObject.skip_tags !== null ||
                     nodeConfig.node.originalNodeObject.diff_mode !== null ||
                     showExtraVars)">
            {{:: strings.get('workflow_maker.READ_ONLY_NO_PROMPT_VALUES')}}
        </div>
        <div class="Prompt-previewRow--flex" ng-if="nodeConfig.node.originalNodeObject.job_type !== null">
            <div class="Prompt-previewRowTitle">{{:: strings.get('prompt.JOB_TYPE') }}</div>
            <div class="Prompt-previewRowValue">
                <span ng-if="nodeConfig.node.originalNodeObject.job_type === 'run'">{{:: strings.get('prompt.PLAYBOOK_RUN') }}</span>
                <span ng-if="nodeConfig.node.originalNodeObject.job_type === 'check'">{{:: strings.get('prompt.CHECK') }}</span>
            </div>
        </div>
        <div class="Prompt-previewRow--flex" ng-if="nodeConfig.node.originalNodeObject.inventory !== null">
            <div class="Prompt-previewRowTitle">{{:: strings.get('prompt.INVENTORY') }}</div>
            <div class="Prompt-previewRowValue" ng-bind="nodeConfig.node.originalNodeObject.summary_fields.inventory.name"></div>
        </div>
        <div class="Prompt-previewRow--flex" ng-if="nodeConfig.node.originalNodeObject.limit !== null">
            <div class="Prompt-previewRowTitle">{{:: strings.get('prompt.LIMIT') }}</div>
            <div class="Prompt-previewRowValue" ng-bind="nodeConfig.node.originalNodeObject.limit"></div>
        </div>
        <div class="Prompt-previewRow--flex" ng-if="nodeConfig.node.originalNodeObject.verbosity !== null">
            <div class="Prompt-previewRowTitle">{{:: strings.get('prompt.VERBOSITY') }}</div>
            <div class="Prompt-previewRowValue" ng-bind="nodeConfig.node.originalNodeObject.verbosity"></div>
        </div>
        <div class="Prompt-previewRow--noflex" ng-if="nodeConfig.node.originalNodeObject.job_tags !== null">
            <div class="Prompt-previewRowTitle">
                <span>{{:: strings.get('prompt.JOB_TAGS') }}&nbsp;</span>
                <span ng-click="showJobTags = !showJobTags">
                    <span class="fa fa-caret-down" ng-show="showJobTags" ></span>
                    <span class="fa fa-caret-left" ng-show="!showJobTags"></span>
                </span>
            </div>
            <div ng-show="showJobTags" class="Prompt-previewTagContainer">
                <div class="u-wordwrap" ng-repeat="tag in jobTags">
                    <div class="LabelList-tag">
                        <span>{{tag}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="Prompt-previewRow--noflex" ng-if="nodeConfig.node.originalNodeObject.skip_tags !== null">
            <div class="Prompt-previewRowTitle">
                <span>{{:: strings.get('prompt.SKIP_TAGS') }}&nbsp;</span>
                <span ng-click="showSkipTags = !showSkipTags">
                    <span class="fa fa-caret-down" ng-show="showSkipTags" ></span>
                    <span class="fa fa-caret-left" ng-show="!showSkipTags"></span>
                </span>
            </div>
            <div ng-show="showSkipTags" class="Prompt-previewTagContainer">
                <div class="u-wordwrap" ng-repeat="tag in skipTags">
                    <div class="LabelList-tag">
                        <span>{{tag}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="Prompt-previewRow--flex" ng-if="nodeConfig.node.originalNodeObject.diff_mode !== null">
            <div class="Prompt-previewRowTitle">{{:: strings.get('prompt.SHOW_CHANGES') }}</div>
            <div class="Prompt-previewRowValue">
                <span ng-if="promptData.prompts.diffMode.value">{{:: strings.get('ON') }}</span>
                <span ng-if="!promptData.prompts.diffMode.value">{{:: strings.get('OFF') }}</span>
            </div>
        </div>
        <div class="Prompt-previewRow--noflex" ng-show="showExtraVars">
            <div class="Prompt-previewRowTitle">{{:: strings.get('prompt.EXTRA_VARIABLES') }}</div>
            <div>
                <textarea rows="6" ng-model="extraVars" name="node_form_extra_vars" class="form-control Form-textArea Form-textAreaLabel" id="workflow_node_form_extra_vars"></textarea>
            </div>
        </div>
    </div>
    <div ng-show="editNodeHelpMessage && activeTab === 'jobs'" class="WorkflowMaker-formHelp" ng-bind="editNodeHelpMessage"></div>
    <br />
    <div class="buttons Form-buttons" id="workflow_maker_controls">
        <button type="button" class="btn btn-sm Form-primaryButton Form-primaryButton--noMargin" id="workflow_maker_prompt_btn" ng-show="showPromptButton && activeTab == 'jobs' " ng-click="openPromptModal()"> {{:: strings.get('prompt.PROMPT') }}</button>
        <button type="button" class="btn btn-sm Form-cancelButton" id="workflow_maker_cancel_node_btn" ng-show="!readOnly" ng-click="cancel()"> {{:: strings.get('CANCEL') }}</button>
        <button type="button" class="btn btn-sm Form-cancelButton" id="workflow_maker_close_node_btn" ng-show="readOnly" ng-click="cancel()"> {{:: strings.get('CLOSE') }}</button>
        <button type="button" class="btn btn-sm Form-saveButton" id="workflow_maker_select_node_btn" ng-show="!readOnly" ng-click="select({selectedTemplate, promptData, edgeType})" ng-disabled="!selectedTemplate || promptModalMissingReqFields || credentialRequiresPassword || selectedTemplateInvalid"> {{:: strings.get('workflow_maker.SELECT') }}</button>
    </div>
    <prompt prompt-data="promptData" action-text="{{:: strings.get('prompt.CONFIRM')}}" prevent-creds-with-passwords="preventCredsWithPasswords" read-only-prompts="readOnly"></prompt>
</div>
