<!--upload image  page-->

<div class="content">
    <div style="display:flex;flex-direction:row;">
        <div style="width:750px;">

            <h3>{{environmentInfo.name}} -- Image
                <button class="btn btn-default" style="float:right" ng-click="goNext()">Next</button>
            </h3>
            <!--<p>In this process, you can input your define openrc config or upload a openrc file</p>-->

            <hr>
            <h4>Alternative Images</h4>
            <div>
                <table class="table table-striped">

                    <tr>
                        <th>name</th>
                        <th>description</th>
                        <th>size</th>
                        <th>status</th>
                        <th>time</th>
                        <th>action</th>
                    </tr>
                    <tr ng-repeat="image in yardstickImage">
                        <td>{{image.name}}</td>
                        <td>{{image.description}}</td>
                        <td>{{image.size | number:2}} MB</td>
                        <td>{{image.status}}</td>
                        <td>{{image.time}}</td>
                        <td>
                            <div class="btn-group" uib-dropdown>
                                <button id="single-button" type="button" class="btn btn-default btn-sm" uib-dropdown-toggle>
                                    action<span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
                                    <li role="menuitem" ng-show="image.status == 'N/A'"><a ng-click="loadYardstickImage(image.name)">load</a></li>
                                    <li role="menuitem" ng-show="image.status != 'N/A'"><a ng-click="deleteYardstickImage(image.name)">delete</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

            <hr>
            <h4 style="display:inline">Custom Images</h4>
            <div class="btn-group button-margin" style="float:right;margin-top:-10px;margin-bottom:5px">
                <button class="btn btn-default" style="width:60px" ngf-select="uploadCustomImage($file, $invalidFiles)" ngf-max-size="2048MB">
                        <div ng-show="!showloading">Local</div>
                        <img src="images/loading2.gif" width="25" height="25" ng-if="showloading" />
                </button>
                <button class="btn btn-default" style="width:60px" ng-click="openImageDialog()">Url</button>
            </div>
            <div>
                <table class="table table-striped">

                    <tr>
                        <th>name</th>
                        <th>description</th>
                        <th>size</th>
                        <th>status</th>
                        <th>time</th>
                        <th>action</th>
                    </tr>
                    <tr ng-repeat="image in customImage">
                        <td>{{image.name}}</td>
                        <td>{{image.description}}</td>
                        <td>{{image.size | number:2}} MB</td>
                        <td>{{image.status}}</td>
                        <td>{{image.time}}</td>
                        <td>
                            <div class="btn-group" uib-dropdown>
                                <button id="single-button" type="button" class="btn btn-default btn-sm" uib-dropdown-toggle>
                                    action<span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
                                    <li role="menuitem" ><a ng-click="deleteCustomImage(image.id)">delete</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

        </div>
    </div>

</div>
<toaster-container></toaster-container>

<style>
    .form-control {
        border-radius: 5px;
        width: 200px;
        margin-bottom: 10px;
    }

    .uploadbutton {
        background-color: #007ACC;
        color: #fff;
        border: 0px;
        border-radius: 5px;
        height: 27px;
    }

    .edit-title {
        border: 0px;
        background-color: #ffffff;
        margin-bottom: 5px;
        font-size: 12px;
    }

    .null-edit-title {
        border: 1px solid #e5e6e7;
        border-radius: 5px;
        margin-bottom: 3px;
    }

    .item-info {
        display: flex;
        flex-direction: row;
    }

    .delete-img {
        width: 15px;
        height: 15px;
        opacity: 0.8;
        margin-left: -10px;
        margin-top: -3px;
        cursor: pointer;
    }

    .nextButton {
        margin-top: 30px;
        border: none;
        border-radius: 5px;
        padding: 6px;
        background-color: #339933;
        color: #ffffff;
        text-align: center;
        /* margin-left: 300px; */
    }

    .bs-sidenav {
        margin-top: 40px;
        margin-bottom: 20px;
        width: 124px;
    }

    .nav {
        margin-bottom: 0;
        padding-left: 0;
        list-style: none;
    }

    .nav>li {
        position: relative;
        display: block;
    }

    li {
        display: list-item;
        text-align: -webkit-match-parent;
    }

    a {
        cursor: pointer;
    }

    a.active {
        background-color: #EEEEEE;
        border-radius: 5px;
    }
</style>