<!--upload image  page-->

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

            <h3>{{baseElementInfo.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/>
            <button class="btn btn-default" ng-click="uploadImage()">
                 <div ng-if="!showloading">Load Image</div>
                 <img src="images/loading2.gif" width="25" height="25" ng-if="showloading" />
            </button>
            <i class="fa fa-check" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: #2ecc71;" ng-show="imageStatus==1&&ifshowStatus==1">done</i>
            <i class="fa fa-spinner" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: #2ecc71;" ng-show="imageStatus==0&&ifshowStatus==1">loading</i>
            <i class="fa fa-exclamation-triangle" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: red;" ng-show="imageStatus==2&&ifshowStatus==1">error</i>

            <hr>
            <h4>Current Images</h4>

            <div>
                <table class="table table-striped">

                    <tr>
                        <th>name</th>
                        <th>size</th>
                        <th>status</th>
                        <th>time</th>
                    </tr>
                    <tr ng-repeat="image in imageListData">
                        <td>{{image.name}}</td>
                        <td>{{image.size/1024}} MB</td>
                        <td>{{image.status}}</td>
                        <td>{{image.time}}</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>