<div class="dcae-main-container">
    <div class="dcae-left-sidebar">
        <div class="dcae-menu-item" ng-class="{selected:page==='general'}" ui-sref="dcae.app.home">Home</div>
        <div class="dcae-menu-item selected" ng-class="{selected:page==='general'}"
             ng-click="goGeneral(component, component==null)">General
        </div>
        <div class="dcae-menu-item" ng-class="{selected:page==='import'}"
             ng-click="goImport(component,component==null)">Import
        </div>
        <div class="dcae-menu-item" ng-class="{selected:page==='composition'}" ng-click="goComposition(component, selfAssurance)" data-tests-id="dcae-menu-item-Composition">
            Composition
        </div>
        <!--<div class="dcae-menu-item" ng-class="{selected:page==='artifact'}" ng-click="goArtifact()">Artifact</div>-->
    </div>
    <!-- BOOTSTRAP COMPONENTS -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <div class="dcae-main-right-container">

        <div class="dcae-workspace-top-bar">
            <div ng-show="!createMode" class="version-container">
                <!-- ngIf: !isCreateMode() && !component.isLatestVersion() -->
                <!-- ngIf: !isCreateMode() -->
				<span class="lifecycle-state-text ng-binding"
                      data-tests-id="formlifecyclestate">V{{component.version}}</span>
                <!-- end ngIf: !isCreateMode() -->
            </div>

            <div ng-show="!createMode" class="lifecycle-state">
                <div data-ng-show="showLifecycleIcon()" class="lifecycle-state-icon"
                     data-ng-class="{'in-design-status-icon': createMode, '': !createMode}"></div>
				<span class="lifecycle-state-text ng-binding"
                      data-tests-id="formlifecyclestate">{{component.lifecycleState}}</span>
            </div>


            <div ng-show="!createMode" class="progress-container">
                <div class="general-view-top-progress top-progress ng-isolate-scope"
                     progress-value="progressService.getProgressValue(component.uniqueId)"
                     progress-message="progressMessage"></div>
            </div>

            <div class="sdc-workspace-top-bar-buttons">

                <!-- ngIf: !isCreateMode() && !component.isLatestVersion() && !showChangeStateButton() -->

                <!-- ngIf: isDesigner() && !isCreateMode() -->
                <!-- isDesigner() &amp;&amp; !isCreateMode() -->
                <!--<button class="btn btn-default" ng-show="!createMode" ng-click="save()"
                        class="tlv-btn blue ng-scope" data-tests-id="create/save"
                        sdc-smart-tooltip=""
                        style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Update
                </button>-->
                <!-- end ngIf: isDesigner() && !isCreateMode() -->

                <!-- ngRepeat: (key,button) in changeLifecycleStateButtons -->

                <!-- ngIf: !isViewMode() && isCreateMode() -->

                <!-- ngIf: (isDesigner() || isProductManager()) && !isCreateMode() && component.lifecycleState === 'NOT_CERTIFIED_CHECKOUT' -->

                <!-- ngIf: isDesigner() -->
				<span data-ng-if="isDesigner()"
                      data-ng-class="{'disabled' :isDisableMode() || isViewMode()}"
                      ng-click="revert()"
                      class="dcae-sprite-new revert-btn ng-scope disabled"
                      data-tests-id="revert" data-ng-show="showFullIcons()"
                      sdc-smart-tooltip=""
                      style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Revert</span>
                <!-- end ngIf: isDesigner() -->

                <!-- ngIf: isComposition && !component.isProduct() -->
                <span class="delimiter"></span> <span class="dcae-sprite-new x-btn"
                                                      data-ng-click="goToBreadcrumbHome()" sdc-smart-tooltip=""
                                                      style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Close</span>

            </div>


        </div>


        <div data-ng-show="!createMode"
             class="dcae-asset-creation-info ng-binding ng-scope">
            <b>UUID:</b>&nbsp;{{component.uuid}}<b>&nbsp;Invariant UUID:</b>&nbsp;{{component.invariantUUID}}
        </div>

        <br>
        {{s}}
        <br>
        <br>
        <div class="dcae-main-container-body-content ng-scope"
             data-ng-class="{'third-party':thirdParty}" data-ui-view="">

            <div include-padding="true"
                 class="sdc-workspace-general-step ng-scope">

                <form novalidate=""
                      class="w-sdc-form ng-pristine ng-valid-name-exist ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength"
                      name="editForm">

                    <div class="w-sdc-form-section-container">

                        <div class="i-sdc-form-item">
                            <div
                                class="general-view-top-progress top-progress ng-isolate-scope"
                                progress-value="progressValue"
                                progress-message="progressMessage">

                                <!--======================= Top progress var =======================-->
                                <!-- ngIf: progressValue>0 && progressValue<100 -->

                                <!-- ngIf: progressValue===100 -->

                                <!-- ngIf: progressValue===-1 -->
                                <!--======================= Top progress var =======================-->


                            </div>
                        </div>


                        <div class="w-sdc-form-columns-wrapper">

                            <div class="w-sdc-form-column">


                                <!--------------------- NAME -------------------->
                                <div class="i-sdc-form-item"
                                     data-ng-class="{'error': validateField(editForm.componentName)}">
                                    <label class="i-sdc-form-label required">Name</label> <input
                                    class="i-sdc-form-input ng-pristine ng-valid-name-exist ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-touched"
                                    data-ng-class="{'view-mode': isViewMode()}"
                                    name="name"
                                    data-ng-init="isCreateMode() &amp;&amp; validateName(true)"
                                    data-ng-maxlength="50" maxlength="50" data-ng-minlength="0"
                                    minlength="0" data-ng-model="component.name" type="text"
                                    data-required="" data-ng-model-options="{ debounce: 500 }"
                                    data-ng-pattern="/^[\s\w\&amp;_.:-]{1,1024}$/"
                                    data-ng-disabled="component.isAlreadyCertified()"
                                    data-tests-id="name" autofocus="" ng-readonly="isViewMode()">

                                    <div class="input-error ng-hide"
                                         data-ng-show="validateField(editForm.componentName)">
										<span ng-show="editForm.componentName.$error.required"
                                              translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"
                                              class="ng-scope">Name is required.</span> <span
                                        ng-show="editForm.componentName.$error.maxlength"
                                        translate="VALIDATION_ERROR_MAX_LENGTH"
                                        translate-values="{'max': '50' }" class="ng-scope ng-hide">Max
											length 50 characters.</span> <span
                                        ng-show="editForm.componentName.$error.minlength"
                                        translate="VALIDATION_ERROR_MIN_LENGTH"
                                        translate-values="{'min': '4' }" class="ng-scope ng-hide">Min
											length 4 characters.</span> <span
                                        ng-show="editForm.componentName.$error.nameExist"
                                        translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"
                                        class="ng-scope ng-hide">Name already exists.</span> <span
                                        ng-show="editForm.componentName.$error.pattern"
                                        translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"
                                        class="ng-scope ng-hide">Special characters not
											allowed.</span>
                                    </div>
                                </div>
                                <!--------------------- NAME -------------------->

                                <!--------------------- FULL NAME -------------------->
                                <!-- ngIf: component.isProduct() -->
                                <!--------------------- NAME -------------------->

                                <!--------------------- DESCRIPTION -------------------->
                                <div class="i-sdc-form-item"
                                     data-ng-class="{'error': validateField(editForm.description)}">
                                    <label class="i-sdc-form-label required">Description</label>
									<textarea
                                        class="description ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-maxlength"
                                        name="description" data-ng-class="{'view-mode': isViewMode()}"
                                        data-ng-maxlength="1024" data-required=""
                                        data-ng-model="component.description"
                                        data-ng-model-options="{ debounce: 500 }"
                                        data-ng-pattern="/^[\u0000-\u00BF]*$/" maxlength="1024"
                                        data-tests-id="description"></textarea>
                                    <!-- placeholder="Description here..." -->

                                    <div class="input-error ng-hide" data-ng-show="true">
										<span ng-show="editForm.description.$error.required"
                                              translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"
                                              class="ng-scope">Description is required.</span> <span
                                        ng-show="editForm.description.$error.maxlength"
                                        translate="VALIDATION_ERROR_MAX_LENGTH"
                                        translate-values="{'max': '1024' }" class="ng-scope ng-hide">Max
											length 1024 characters.</span> <span
                                        ng-show="editForm.description.$error.pattern"
                                        translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"
                                        class="ng-scope ng-hide">Special characters not
											allowed.</span>
                                    </div>
                                </div>
                                <!--------------------- DESCRIPTION -------------------->

                                <!--------------------- CATEGORIES -------------------->
                                <!-- ngIf: !component.isProduct() -->
                                <!-- end ngIf: !component.isProduct() -->
                                <!--------------------- CATEGORIES -------------------->
                                <button ng-show="createMode" ng-click="save()"
                                        class="tlv-btn outline green ng-scope">Create
                                </button>

                                

                            </div>
                            <!-- Close w-sdc-form-column -->

                        </div>

                    </div>
                    <!-- Close w-sdc-form-section-container -->

                </form>

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