path: root/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html

<!--Header-->
<header>
    <div class="row m-0">
        <div class="col pl-0">
            <p class="logo mb-0"></p>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb designer-breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="#">CBA Packages</a>
                    </li>
                    <i class="fa fa-angle-right ml-2 mr-2"></i>
                    <li class="breadcrumb-item">
                        <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
                        <button type="button" class="btn package-info-btn" data-toggle="modal"
                            data-target="#exampleModalLong">
                            <i class="icon-info" aria-hidden="true"></i>
                        </button>
                    </li>
                    <i class="fa fa-angle-right ml-2 mr-2"></i>
                    <li class="breadcrumb-item active" aria-current="page">
                        <p class="mb-0">Designer Mode</p>
                    </li>
                </ol>
                <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <img src="assets/img/icon-close.svg" />
                                </button>
                            </div>
                            <div class="modal-body package-info">
                                <div class="row">
                                    <div class="col">
                                        <h3>Test Package
                                            <span class="package-version">Version 1.0.2</span></h3>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col mb-3">
                                        <span class="badge badge-primary">test</span>
                                        <span class="badge badge-primary">vDNS-CDS</span>
                                        <span class="badge badge-primary">SCALE-OUT</span>
                                        <span class="badge badge-primary">MARCO</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2 pr-0">
                                        <img src="/assets/img/img-user3.jpg" class="creator-pic">
                                    </div>
                                    <div class="col-10 pl-0">
                                        <p><b>Author information:</b></p>
                                        <p>Abdelmuhaimen Seaudi</p>
                                        <p>abdelmuhaimen.seaudi@orange.com</p>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="col pr-0 text-right">
            <ul class="topology-actions">
                <li>
                    <div class="btn-group" role="group" aria-label="Basic example">
                        <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
                            data-tooltip="Preview">
                            <i class="fa fa-eye"></i>
                        </a>
                        <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
                            data-tooltip="Download">
                            <i class="fa fa-download"></i>
                        </a>
                        <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
                            data-tooltip="Share">
                            <i class="fa fa-share-square"></i>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="dropdown">
                        <input class="dropdown-toggle" type="text">
                        <div class="dropdown-text">Save</div>
                        <ul class="dropdown-content save-blueprint">
                            <li>
                                <a (click)="saveBluePrint()">Save</a>
                            </li>
                            <li>
                                <a (click)="publishBluePrint()">Save &amp; Deploy</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>


        </div>
    </div>
</header>
<!--Editor Bar-->
<nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
    <!--Actions/Functions Side Menu Toogole Button-->
    <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
        data-tooltip="Collapse Side bar">
        <i class="fa arr-size">&#xf100;</i>
    </button>
    <!--Nav Tabs-->
    <div class="collapse navbar-collapse ">
        <!--Action Tabs-->
        <ul class="navbar-nav">
            <li class="nav-item active">
                <nav class="row">
                    <div class="col-12">
                        <div class="nav nav-tabs " id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab"
                                aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
                            <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab"
                                aria-controls=" " aria-selected="false">Template</a>
                        </div>
                    </div>
                </nav>
            </li>
        </ul>
        <!--Requirement/Capability Legend-->
        <ul class="templateLegend ml-auto mr-auto p-0">
            <li class="requirement"><i class="icon-rectangle" aria-hidden="true"></i> Requirement</li>
            <li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li>
        </ul>
        <!--Undo/Redo Buttons-->
        <ul class="editor navbar">
            <li>
                <button type="button" class="btn tooltip-bottom" data-tooltip="Undo">
                    <img src="/assets/img/icon-undoActive.svg">
                </button>
            </li>
            <li>
                <button type="button" class="btn tooltip-bottom" data-tooltip="Redo">
                    <img src="/assets/img/icon-redo.svg">
                </button>
            </li>
            <li class="vertical_line"></li>
            <li>
                <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom Out">
                    <img src="/assets/img/icon-zoomOut.svg">
                </button>
            </li>
            <li class="zoom-percent">100%</li>
            <li>
                <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom In">
                    <img src="/assets/img/icon-zoomIn.svg"></button>
            </li>
        </ul>
        <!--Designer/Scripting View Tabs-->
        <ul class="navbar ml-2" style="list-style: none">
            <li class="nav-item">
                <div class="btn-group viewBtns" role="group">
                    <button type="button" class="btn btn-secondary topologySource active">Designer</button>
                    <button [routerLink]="['/designer/source', viewedPackage.id]" type="button"
                        class="btn btn-secondary topologyView">Scripting
                    </button>
                </div>
            </li>
        </ul>
    </div>
</nav>

<ng-sidebar-container class="sidebar-container">
    <!--Left Side Menu-->
    <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
        [mode]="'push'" #sidebarLeft>
        <nav class="row">
            <!--Nav Tabs-->
            <div class="col">
                <div class="nav nav-tabs " id="nav-tab" role="tablist">
                    <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
                        role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
                    <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
                        role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
                </div>
            </div>
        </nav>
        <div class="row">
            <div class="col">
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-action" role="tabpanel"
                        aria-labelledby="nav-action-tab">
                        <!--Action Search Box-->
                        <input type="text" class="form-control input-search-controller" placeholder="Search Actions">
                        <button (click)="sidebarRight1.open()" type="button" class="btn btn-primary">
                            Action Attributes
                        </button>
                        <br /><br />
                        <button (click)="sidebarRight2.open()" type="button" class="btn btn-secondary">
                            Function Attributes
                        </button>
                        <br />
                        <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action">
                            + &nbsp;&nbsp;New Action
                        </button>
                        <div class="actionsList">
                            <div *ngIf="showAction" class="custom-control">
                                <label><i class="icon-file" aria-hidden="true"></i>
                                    {{customActionName}} </label>
                            </div>
                            <div *ngIf="!showAction" class="custom-control">
                                <ul>
                                    <li *ngFor="let customActionName of actions">
                                        <label>
                                            <i class="icon-file" aria-hidden="true" class="icon-file"
                                                (click)="openFunctionAttributes(customActionName)"></i>
                                            {{customActionName}} </label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab">
                        <!--Function Search Box-->
                        <input type="text" class="form-control input-search-controller" placeholder="Search Functions">
                        <div id="palette-paper" class="componentsList"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="helpBox"><i class="icon-info" aria-hidden="true"></i>
            <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a>
        </div>
    </ng-sidebar>
    <!--Page content-->
    <div ng-sidebar-content id="board-paper">
        <button class="rotate" (click)="_toggleSidebar1()">
            <span>
                Controller
                <i class="fa fa-angle-double-left"></i>
            </span>
        </button>


        <!-- CANVAS -->
        <!--Editor Bar-->
        <div class="editBar text-center">
            <div class="btn-group mr-2" role="group" aria-label="First group">
                <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
                    <img src="/assets/img/icon-undoActive.svg">
                </button>
                <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">
                    <img src="/assets/img/icon-redo.svg">
                </button>
            </div>
            <div class="btn-group mr-2" role="group" aria-label="Second group">
                <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">
                    <img src="/assets/img/icon-zoomOut.svg">
                </button>
                <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>
                <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">
                    <img src="/assets/img/icon-zoomIn.svg">
                </button>
            </div>
            <div class="btn-group viewBtns" role="group" aria-label="Third group">
                <button type="button" class="btn btn-secondary topologySource active">View</button>
                <button type="button" class="btn btn-secondary topologyView">Source</button>
            </div>
        </div>
        <!--<button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
    </div>

    <!--Right Side Menu - Action Attribute-->
    <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
        [position]="'right'" #sidebarRight1>
        <div class="container-fluid0">
            <div class="row m-0">
                <div class="col attributesContainer">
                    <div class="row m-0 attributesContainertTitle">
                        <div class="col-2 pl-0">
                            <button (click)="sidebarRight1.close()" class="closeBar" tooltip="Close"
                                placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i></button>
                        </div>
                        <h6 class="col pl-0">Action Attributes</h6>
                        <div class="col-3 pl-0">
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn view-source" tooltip="View Action Source"
                                    placement="bottom"><i class="icon-source"></i></button>
                                <button type="button" class="btn trash-item" tooltip="Delete Action"
                                    placement="bottom"><i class="icon-delete-sm" type="button"
                                        aria-hidden="true"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="scrollWrapper">
                        <div class="row m-0">
                            <div class="col">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Action Name</label>
                                    <input type="text" class="form-control" placeholder="Action Name"
                                        value="resource-assignment">
                                </div>
                            </div>
                        </div>
                        <!--Add Attribute-->
                        <div class="row m-b add-attribute">
                            <div class="col">
                                <h5>Add Attribute</h5>
                                <div class="row">
                                    <div class="col pr-0 text-center">
                                        <button type="button" data-toggle="modal" data-target="#exampleModalScrollable"
                                            class="btn btn-secondary"><i class="icon-custom-attribute" type="button"
                                                aria-hidden="true"></i></button>
                                        <span>Custom Attribute</span>


                                    </div>
                                    <div class="col text-center">
                                        <button type="button" class="btn btn-secondary"><i
                                                class="icon-function-attribute" type="button"
                                                aria-hidden="true"></i></button>
                                        <span>Function Attribute</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--INPUTS-->
                        <div class="accordion" id="accordionExample">
                            <div class="card">
                                <div class="card-header row" id="headingOne">
                                    <button class="btn btn-link" type="button" data-toggle="collapse"
                                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        Inputs
                                    </button>
                                </div>
                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                    data-parent="#accordionExample">
                                    <div class="card-body action-attributes">
                                        <div class="row">
                                            <div class="col">
                                                <div class="form-group">
                                                    <label for="exampleFormControlTextarea1">template-prefix
                                                        <i class="icon-required-star" type="button"
                                                            aria-hidden="true"></i></label>
                                                    <div class="attributeOptions">
                                                        <a data-toggle="modal" data-target="#templateDeletionModal"
                                                            class="accordion-delete editAttribute"
                                                            tooltip="Edit Attribute" placement="bottom"><i
                                                                class="icon-edit"></i></a><a data-toggle="modal"
                                                            data-target="#templateDeletionModal"
                                                            class="accordion-delete deleteAttribute"
                                                            tooltip="Delete Attribute" placement="bottom"><i
                                                                class="icon-delete-sm"></i></a>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">resource-assignment-properties <i
                                                            class="icon-required-star" type="button"
                                                            aria-hidden="true"></i></label>
                                                    <div class="attributeOptions">
                                                        <a data-toggle="modal" data-target="#templateDeletionModal"
                                                            class="accordion-delete editAttribute"
                                                            tooltip="Edit Attribute" placement="bottom"><i
                                                                class="icon-edit"></i></a><a data-toggle="modal"
                                                            data-target="#templateDeletionModal"
                                                            class="accordion-delete deleteAttribute"
                                                            tooltip="Delete Attribute" placement="bottom"><i
                                                                class="icon-delete-sm"></i></a>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">occurrence <i
                                                            class="icon-required-star optional-attribute" type="button"
                                                            aria-hidden="true"></i></label>
                                                    <div class="attributeOptions">
                                                        <a data-toggle="modal" data-target="#templateDeletionModal"
                                                            class="accordion-delete editAttribute"
                                                            tooltip="Edit Attribute" placement="bottom"><i
                                                                class="icon-edit"></i></a><a data-toggle="modal"
                                                            data-target="#templateDeletionModal"
                                                            class="accordion-delete deleteAttribute"
                                                            tooltip="Delete Attribute" placement="bottom"><i
                                                                class="icon-delete-sm"></i></a>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="exampleFormControlTextarea1">store-result
                                                        <i class="icon-required-star optional-attribute" type="button"
                                                            aria-hidden="true"></i></label>
                                                    <div class="attributeOptions">
                                                        <a data-toggle="modal" data-target="#templateDeletionModal"
                                                            class="accordion-delete editAttribute"
                                                            tooltip="Edit Attribute" placement="bottom"><i
                                                                class="icon-edit"></i></a><a data-toggle="modal"
                                                            data-target="#templateDeletionModal"
                                                            class="accordion-delete deleteAttribute"
                                                            tooltip="Delete Attribute" placement="bottom"><i
                                                                class="icon-delete-sm"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--OUTPUTS-->
                        <div class="accordion" id="accordionExample1">
                            <div class="card">
                                <div class="card-header row" id="headingOne">
                                    <button class="btn btn-link" type="button" data-toggle="collapse"
                                        data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                        Outputs
                                    </button>
                                </div>

                                <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne"
                                    data-parent="#accordionExample1">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col">
                                                <div class="form-group">
                                                    <label for="exampleFormControlTextarea1">resolved-data
                                                        <i class="icon-required-star optional-attribute" type="button"
                                                            aria-hidden="true"></i></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->

    </ng-sidebar>

    <!--Right Side Menu - Function Attribute-->
    <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar attributesSideBar'" [mode]="'push'"
        [position]="'right'" #sidebarRight2>
        <div class="container-fluid0">
            <div class="row m-0">
                <div class="col attributesContainer">
                    <div class="row m-0 attributesContainertTitle">
                        <div class="col-2 pl-0">
                            <button (click)="sidebarRight2.close()" class="closeBar" tooltip="Close"
                                placement="bottom"><i class="icon-close" type="button" aria-hidden="true"></i></button>
                        </div>
                        <h6 class="col pl-0">Function Attributes</h6>
                        <div class="col-3 pl-0">
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn view-source" tooltip="View Function Source"
                                    placement="bottom"><i class="icon-source"></i></button>
                                <button type="button" class="btn trash-item" tooltip="Delete Function"
                                    placement="bottom"><i class="icon-delete-sm" type="button"
                                        aria-hidden="true"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="scrollWrapper">
                        <div class="row m-0">
                            <div class="col">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Function Instance Name</label>
                                    <input type="text" class="form-control" placeholder="Function Instance Name">
                                </div>
                                <div class="form-group">
                                    <label>Function Type</label>
                                    <label class="attribute-value">component-resource-resolution</label>
                                </div>
                                <div class="form-group">
                                    <label for="exampleFormControlTextarea1">Description</label>
                                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                        <!--INTERFACES-->
                        <div class="accordion" id="accordionExample">
                            <div class="card">
                                <div class="card-header row" id="headingOne">
                                    <button class="btn btn-link" type="button" data-toggle="collapse"
                                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        Interfaces
                                    </button>
                                </div>

                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                    data-parent="#accordionExample">
                                    <div class="card-body">
                                        <!--Inputs & Outputs Tabs-->
                                        <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <a class="nav-link active" id="pills-home-tab" data-toggle="pill"
                                                    href="#pills-home" role="tab" aria-controls="pills-home"
                                                    aria-selected="true">Inputs</a>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <a class="nav-link" id="pills-profile-tab" data-toggle="pill"
                                                    href="#pills-profile" role="tab" aria-controls="pills-profile"
                                                    aria-selected="false">Outputs</a>
                                            </li>
                                        </ul>
                                        <div class="tab-content" id="pills-tabContent">
                                            <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                                aria-labelledby="pills-home-tab">
                                                <div class="row">
                                                    <div class="col">
                                                        <!--list-->
                                                        <div class="attribute-wrap">
                                                            <div class="form-group">
                                                                <label
                                                                    for="exampleFormControlTextarea1">artifact-prefix-names
                                                                    <i class="icon-required-star" type="button"
                                                                        aria-hidden="true"></i></label>
                                                            </div>
                                                            <div
                                                                class="custom-control custom-radio custom-control-inline">
                                                                <input type="radio" id="customRadioInline1"
                                                                    name="customRadioInline1"
                                                                    class="custom-control-input">
                                                                <label class="custom-control-label"
                                                                    for="customRadioInline1">Pre-defined
                                                                    Template</label>
                                                            </div>
                                                            <div
                                                                class="custom-control custom-radio custom-control-inline">
                                                                <input type="radio" id="customRadioInline2"
                                                                    name="customRadioInline1"
                                                                    class="custom-control-input">
                                                                <label class="custom-control-label"
                                                                    for="customRadioInline2">Input Drivin
                                                                    Template</label>
                                                            </div>
                                                            <br />
                                                            <button type="button" class="btn btn-select-template"><i
                                                                    class="icon-add-circle" type="button"
                                                                    aria-hidden="true"></i> Select Template</button>
                                                        </div>
                                                        <!--string-->
                                                        <div class="attribute-wrap">
                                                            <div class="form-group">
                                                                <label for="exampleInputEmail1">resoluton-key <i
                                                                        class="icon-required-star" type="button"
                                                                        aria-hidden="true"></i></label>
                                                                <input type="text" class="form-control">
                                                            </div>
                                                        </div>
                                                        <!--integer-->
                                                        <div class="attribute-wrap">
                                                            <div class="form-group">
                                                                <label for="exampleInputEmail1">request-id <i
                                                                        class="icon-required-star" type="button"
                                                                        aria-hidden="true"></i></label>
                                                                <input type="number" class="form-control" placeholder=""
                                                                    value="356">
                                                            </div>
                                                        </div>
                                                        <!--boolean-->
                                                        <div class="attribute-wrap">
                                                            <div class="form-group">
                                                                <label
                                                                    for="exampleFormControlTextarea1">resolution-summary
                                                                    <i class="icon-required-star optional-attribute"
                                                                        type="button" aria-hidden="true"></i></label>
                                                            </div>
                                                            <div
                                                                class="custom-control custom-radio custom-control-inline">
                                                                <input type="radio" id="customRadioInline1"
                                                                    name="customRadioInline1"
                                                                    class="custom-control-input">
                                                                <label class="custom-control-label"
                                                                    for="customRadioInline1">True</label>
                                                            </div>
                                                            <div
                                                                class="custom-control custom-radio custom-control-inline">
                                                                <input type="radio" id="customRadioInline2"
                                                                    name="customRadioInline1"
                                                                    class="custom-control-input">
                                                                <label class="custom-control-label"
                                                                    for="customRadioInline2">False</label>
                                                            </div>
                                                        </div>
                                                        <!-- Add Optional Attributes button -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                                                aria-labelledby="pills-profile-tab">2</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--ARTIFACTS-->
                        <div class="accordion" id="accordionExample1">
                            <div class="card">
                                <div class="card-header row" id="headingOne">
                                    <button class="btn btn-link" type="button" data-toggle="collapse"
                                        data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                        Artifacts
                                    </button>
                                </div>

                                <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne"
                                    data-parent="#accordionExample1">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-12">
                                                <a class="template-mapping-list">
                                                    <p>baseconfig</p>
                                                    <span>Mapping</span>
                                                    <span>Template</span>

                                                    <a data-toggle="modal"
                                                        data-target="#templateDeletionModal"
                                                        class="accordion-delete deleteTemplate"
                                                        title="Delete Template"><i class="icon-delete-sm"></i></a>
                                                </a>

                                            </div>
                                            <div class="col-12">
                                                <a class="template-mapping-list">
                                                    <p>vpkg</p>
                                                    <span>Mapping</span>
                                                    <span>Template</span>
                                                    <a data-toggle="modal"
                                                        data-target="#templateDeletionModal"
                                                        class="accordion-delete deleteTemplate"
                                                        title="Delete Template"><i class="icon-delete-sm"></i></a>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-sidebar>



</ng-sidebar-container>

<app-functions-attribute></app-functions-attribute>
<!--Action - Add Custom Attribute - Modal-->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalScrollableTitle">
                    Add Custom Attributes</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <img src="assets/img/icon-close.svg" />
                </button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                    </li>
                  </ul>
                  <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
                  </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Submit Attributes</button>
            </div>
        </div>
    </div>
</div>