public/components/stub-modal/stub-modal.html

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" ng-click="cancel()">&times;</button>
    <h4 class="modal-title">{{ modalTitle }}</h4>
</div>

<form name="stubForm">
    <fieldset>
    <input type="hidden" ng-model="stub.id"/>
    <div class="modal-body">
        <div class="form-group" ng-if="mode === 'import'">
            <label for="stub_title">Content URL
            *<em class="stubModal__import-help">Copy / paste the URL of the content to import (e.g. from Composer)</em></label>
            <input type="text" ng-model="formData.importUrl" ng-change="importUrlChanged()" id="import_url" name="import_url" class="form-control" required  wf-focus focus-me="{{ mode === 'import' }}">
        </div>
        <div class="form-horizontal clearfix">
                <div class="format-dropdown" ng-if="(showFormatDropdown && stubFormatIsCorrectlyPopulated())">
                    <label for="stub_format">Format</label>
                    <div>
                        <select ng-disabled="mode === 'import'" id="stub_format" name="articleFormat" ng-model="stub.articleFormat" ng-options="f.value as f.name for f in articleFormats"></select>
                    </div>
                </div>
            <div class="form-group col-xs-8">
                <label for="stub_title">Working title *</label>
                <input type="text" ng-model="stub.title" id="stub_title" name="title" class="form-control" required wf-focus focus-me="{{ !(mode === 'import') }}">
            </div>
            <div class="form-group pull-right col-xs-5">
                <punters stub="stub"></punters>
            </div>
        </div>
        <div class="form-horizontal clearfix">
            <div class="form-group pull-left col-xs-8">
                <label for="stub_status">Status *</label>
                <div>
                    <select id="stub_status" name="status" ng-model="stub.status" ng-options="status.value as status.label for status in statuses"></select>
                </div>
            </div>
            <div class="form-group pull-right col-xs-5" ng-if="contentName === 'Atom'">
                <label for="stub_content_type">Type *</label>
                <div>
                    <select id="stub_content_type" name="content_type" ng-model="stub.contentType" ng-options="(type.value | lowercase) as type.displayName for type in atomTypes" required>
                    </select>
                </div>
            </div>
            <div class="form-group pull-left col-xs-8" ng-if="contentName !== 'Atom' && !['Atom Workshop', 'Media Atom Maker'].includes(importHandler.name)">
                <label for="stub_cdesk">Commissioning info</label>
                <div ng-if="cdesks.length > 0">
                    <select class="commissioning-desk-margin" id="stub_cdesk" name="cdesk" ng-model="stub.commissioningDesks" ng-options="cdesk.id.toString() as cdesk.externalName for cdesk in cdesks"></select>
                </div>
                <div ng-if="cdesks.length === 0">
                    <p class="commissioning-desk-margin">Selecting commissioning info is temporarily unavailable</p>
                </div>

                <section style="display: contents;" ng-if="isCommissionedLengthRequired()" >
                    <label for="commissionedLength">Commissioned Length <span ng-if="isCommissionedLengthRequired()">*</span></label>
                    <a class="feedback-link"  href="https://docs.google.com/forms/d/e/1FAIpQLSeZje55T3OnErlTI_8iGuyZERjDy2Pybh8fdPmbnjy1PNFDAw/viewform" target="_blank">
                        <span class="feedback-title" title="Send Feedback">Send Feedback</span>
                    </a>
                    <div class="commissioned-length-buttons">
                        <button
                            ng:repeat="commissionedLengthSuggestion in commissionedLengthSuggestions"
                            class="btn btn-default btn-sm commissioned-length-suggestion"
                            ng-model="stub.commissionedLength"
                            btn-radio="commissionedLengthSuggestion"
                            type="button"
                            ng-click="
                                resetMissingCommissionedLengthReason();
                                sendTelemetryForSuggestion(commissionedLengthSuggestion);
                            "
                        >
                            {{ commissionedLengthSuggestion }}
                        </button>
                        <button
                            class="btn btn-default btn-sm breaking-news"
                            ng-model="stub.missingCommissionedLengthReason"
                            btn-radio="'BreakingNews'"
                            ng-click="
                                resetCommissionedLength();
                                sendTelemetryForSuggestion(0, 'BreakingNews');
                                setPriorityToVeryUrgent();
                            "
                            type="button"
                        >
                            Breaking News
                        </button>
                    </div>
                    <div>
                        <input
                            class="form-control"
                            name="commissionedLength"
                            min="0"
                            step="50"
                            type="number"
                            string-to-number
                            ng-model="stub.commissionedLength"
                            placeholder="Choose a custom commissioned length"
                            ng-change="resetMissingCommissionedLengthReason()"
                            ng-required="requiredAttrForCommissionedLength()"
                        />
                    </div>
                </section>
            </div>
            <div class="form-group pull-right col-xs-5">
                <label for="stub_section">Section *</label>
                <div>
                    <select class="section-margin" id="stub_section" name="section" ng-model="stub.section" ng-options="section.name for section in sections" required>
                    </select>
                </div>
                <div ng-if="contentName === 'Article'">
                    <label for="stub_template">Template</label>
                    <div ng-if="!loadingTemplates && templates.length === 0">
                        <p class="help-block">Cannot load templates. Try logging into Composer directly.</p>
                    </div>
                    <div>
                        <select id="stub_template" class="col-xs-12" name="template" ng-model="stub.template" ng-disabled="templates.length === 0" ng-options="template.display for template in templates">
                        </select>
                    </div>
                </div>
            </div>
            <div wf-date-time-picker label="Production deadline" help-text="true" ng-model="stub.due"></div>
            <div class="form-horizontal clearfix">
                <div class="form-group col-xs-8">
                    <label for="stub_priority">Priority</label>

                    <div>
                        <div class="btn-group">
                            <button class="btn btn-default btn-sm" ng-model="stub.priority" ng-disabled="stub.missingCommissionedLengthReason === 'BreakingNews'" btn-radio="0">Normal</button>
                            <button class="btn btn-default btn-sm" ng-model="stub.priority" ng-disabled="stub.missingCommissionedLengthReason === 'BreakingNews'" btn-radio="1"><i class="stubModal__icon" wf-icon="priority-urgent"></i> Urgent</button>
                            <button class="btn btn-default btn-sm" ng-model="stub.priority" btn-radio="2"><i class="stubModal__icon" wf-icon="priority-very-urgent"></i> Very Urgent</button>
                        </div>
                    </div>
                </div>
                <div class="form-group col-xs-5 pull-right">
                    <label for="stub_legal">Legal</label>
                    <div>
                        <select id="stub_legal" name="needsLegal" ng-model="stub.needsLegal" ng-options="ls.value as ls.name for ls in legalStates"></select>
                    </div>
                </div>
                <div class="form-group col-xs-5 pull-right">
                    <label for="stub_picture_desk">Picture Desk</label>
                    <div>
                        <select id="stub_picture_desk" name="needsPictureDesk" ng-model="stub.needsPictureDesk" ng-options="pds.value as pds.name for pds in pictureDeskStates"></select>
                    </div>
                </div>
            </div>
            <div class="form-horizontal clearfix">
                <div class="form-group col-xs-8">
                    <label for="stub_note">Note</label>
                    <input type="text" ng-model="stub.note" id="stub_note" name="note" value="" class="form-control" maxlength="500">
                </div>
                <div class="form-group col-xs-5 pull-right">
                    <label>Production Office</label>
                    <div>
                        <select ng-model="stub.prodOffice"
                                ng-options="office.value as office.name for office in prodOffices">
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal-footer" ng-if="mode !== 'import'" ng-hide="actionInProgress || (actionSuccess && composerUrl)">
        <button type="submit" class="btn btn-default" id="testing-do-generic-submit" ng-click="submit(stubForm)" ng-show="false">
            Submit
        </button>
        <div class="pull-left">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal" ng-click="delete()" ng-if="stub.id">Delete</button>
            <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button>
        </div>
        <div class="pull-right">
            <span ng-if="warningMessages">
                <span ng-repeat="message in warningMessages">{{ message }} </span>
            </span>
            <button type="button" class="btn btn-default" id="testing-create-stub" ng-click="submit(stubForm)" ng-disabled="disabled || stubForm.$invalid " ng-show="stub.status === 'Stub'">
                Save stub
            </button>
            <button
                type="button"
                class="btn btn-primary"
                ng-disabled="disabled || stubForm.$invalid || warningMessages.length > 0"
                ng-class="{ 'disabled': disabled || stubForm.$invalid || warningMessages.length > 0 }"
                id="testing-create-in-composer" 
                ng-click="submit(stubForm)" 
                ng-show="stub.status !== 'Stub' && contentName !== 'Atom'">
                Create new
            </button>
            <button type="button" class="btn btn-primary" id="testing-create-atom" ng-click="submit(stubForm)" ng-disabled="disabled || stubForm.$invalid " ng-show="contentName === 'Atom' && stub.status !== 'Stub'">
                Create atom
            </button>
        </div>
    </div>

    <div class="modal-footer" ng-if="mode === 'import'" ng-hide="actionInProgress">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal" ng-click="cancel()">Cancel</button>
        <button
                type="submit"
                class="btn btn-primary"
                id="testing-import-from-composer"
                ng-click="
                    ok();
                    updateCommissionedLengthInComposer();
                    sendTelemetryForImport(contentName);
                "
                ng-disabled="stubForm.$invalid || !validImport">
            Import <span ng-show="importHandler">from {{importHandler.name}}</span>
        </button>
    </div>

    <div class="modal-footer" ng-show="actionInProgress">
        Loading ...
    </div>

    </fieldset>
</form>

<div class="modal-footer" ng-show="actionSuccess && composerUrl">
   <button type="button" class="btn btn-default pull-left" ng-click="cancel()">Dismiss</button>
    <a ng-href="{{composerUrl}}" class="btn btn-primary pull-right" target="_blank" ng-click="cancel()" id="testing-view-in-composer">View in Composer</a>
</div>

<div class="modal-footer" ng-show="actionSuccess && editorUrl">
    <button type="button" class="btn btn-default pull-left" ng-click="cancel()">Dismiss</button>
    <a ng-href="{{editorUrl}}" class="btn btn-primary pull-right" target="_blank" ng-click="cancel()" id="testing-view-in-atom-editor">View in Editor</a>
</div>

<div class="modal-footer__alert">
    <div class="modal-footer alert alert-info" ng-show="wfComposerState ==='visible'">
        <p>This content is already tracked. <a href="#stub-{{stubId}}" ng-click="cancel()">View in Workflow.</a></p>
    </div>

    <div class="modal-footer alert alert-info" ng-show="wfComposerState ==='invisible'">
        <p>This content is already tracked and not visible in Workflow.
            <a href="{{composerUrl || editorUrl}}" target="_blank" ng-click="cancel()">View in editor.</a>
        </p>
    </div>

    <div class="modal-footer alert alert-danger" ng-show="actionSuccess === false">
        <p ng-show="contentName !== 'Atom'">Workflow's having difficulty communicating with Composer. Please try again. If the problem persists, please <a href="mailto:central.production@guardian.co.uk ">contact Central Production</a>.</p>
        <p ng-show="contentName === 'Atom'">Workflow's having difficulty communicating with the editor for this atom type. Please try again. If the problem persists, please <a href="mailto:central.production@guardian.co.uk ">contact Central Production</a>.</p>
        <p>
            <a ng-show="composerUrl" href="{{composerUrl}}" target="_blank" ng-click="cancel()">View in Composer.</a>
            <a ng-show="editorUrl" href="{{editorUrl}}" target="_blank" ng-click="cancel()">View in Editor.</a>
            <a ng-show="stubId" href="#stub-{{stubId}}" ng-click="cancel()">View in Workflow.</a>
        </p>
    </div>

    <div id="testing-modal-success-message" class="modal-footer alert alert-success" ng-show="actionSuccess">
        <p>Completed successfully!</p>
    </div>
</div>