<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="description" content=""/>
    <meta name="author" content="ThemeBucket"/>
    <link rel="shortcut icon" href="#" type="image/png"/>

    <title>Directory</title>
    <style>


    </style>


    <link href="/admin/bootcss/style.css" rel="stylesheet"/>
    <link href="/admin/bootcss/style-responsive.css" rel="stylesheet"/>
</head>
<body style="background-color:gainsboro">
    <!--body wrapper start-->
    <!--body wrapper start-->
    <div class="wrapper">
        <div class="directory-info-row">
            <div class="row">
                <div >
                    <input type="button"  href="" name="" value="添加容器" class="button"/>
                </div>
                <div class="col-md-6 col-sm-6" th:each="docker :${dockerlist}">
                    <div class="panel">
                        <div class="panel-body">
                            <!--  <h4>Margarita Rose <span class="text-muted small"> - Graphics Designer</span></h4> -->
                            <div class="media">
                                <a class="pull-left" th:href="@{/webdocker/monitordetail(id=${docker.containerid})}">
                                    <img class="thumb media-object" src="/admin/images/101.png" style="height: 130px;width: 100px" alt=""/>
                                </a>
                                <div class="media-body">
                                    <address>
                                        <strong th:text="${docker.names}">机器名称</strong><br/>
                                        ip地址:<span th:text="${docker.ipaddress}">ip</span><br/>
                                        状态:<span th:text="${docker.state}">状态</span><br/>
                                        创建日期:<span th:text="${docker.dates}">状态</span><br/>
                                        <!--cpu：1111&nbsp;&nbsp;memory:1111<br/>-->
                                        <!--  <abbr title="Phone">P:</abbr> (123) 456-7890 -->
                                    </address>
                                    <ul class="social-links">
                                        <li><a title="" data-placement="top"  rel="tooltip" class="tooltips" href="" data-original-title="Check"><i class="fa fa-play"></i></a></li>
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Twitter"><i class="fa fa-pause"></i></a></li>
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="LinkedIn"><i class="fa fa-remove"></i></a></li>
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Skype"><i class="fa fa-power-off"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            <!--    <div class="col-md-6 col-sm-6">
                    <div class="panel">
                        <div class="panel-body">
                            <div class="media">
                                <a class="pull-left" href="#">
                                    <img class="thumb media-object" src="/admin/images/photos/user1.png" alt=""/>
                                </a>
                                <div class="media-body">
                                    <address>
                                        <strong>机器名称</strong><br/>
                                        192.168.1.188<br/>
                                        cpu：1111&nbsp;&nbsp;memory:1111<br/>
                                    </address>
                                    <ul class="social-links">
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Facebook"><i class="fa fa-facebook"></i></a></li>
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Twitter"><i class="fa fa-twitter"></i></a></li>
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Skype"><i class="fa fa-skype"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-sm-6">
                    <div class="panel">
                        <div class="panel-body">
                            <div class="media">
                                <a class="pull-left" href="#">
                                    <img class="thumb media-object" src="/admin/images/photos/user3.png" alt=""/>
                                </a>
                                <div class="media-body">
                                    <address>
                                        <strong>机器名称</strong><br/>
                                        192.168.1.188<br/>
                                        cpu：1111&nbsp;&nbsp;memory:1111<br/>
                                    </address>
                                    <ul class="social-links">
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Facebook"><i class="fa fa-facebook"></i></a></li>
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Twitter"><i class="fa fa-twitter"></i></a></li>
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Skype"><i class="fa fa-skype"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-sm-6">
                    <div class="panel">
                        <div class="panel-body">
                            <div class="media">
                                <a class="pull-left" href="#">
                                    <img class="thumb media-object" src="/admin/images/photos/user2.png" alt=""/>
                                </a>
                                <div class="media-body">
                                    <address>
                                        <strong>机器名称</strong><br/>
                                        192.168.1.188<br/>
                                        cpu：1111&nbsp;&nbsp;memory:1111<br/>
                                    </address>
                                    <ul class="social-links">
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title=""><i class="fa fa-facebook"></i></a></li>
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Twitter"><i class="fa fa-twitter"></i></a></li>
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
                                        <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Skype"><i class="fa fa-skype"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
-->
            </div>
        </div>
    </div>
</body>
</html>