<!DOCTYPE html>
<html class="no-js" lang="ja" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <title>Limited</title>
        <meta name="description" content=""/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="icon" href="images/favicon.png"/>
        <link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}"/>
        
​
        <!--[if lt IE 9]>
            <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
        <![endif]-->
    </head>
    <body>
     <!-- モーダル中身 -->
    <div id="modal-content">
      <div id="modal-content-innar">
        <!-- モーダルウィンドウのコンテンツ開始 -->
        <img class="shoeImage" alt="productImage"/>
        <div id="showName"></div>
        <div id="showPrice"></div>
        
        <p><a id="modal-close" class="button-link">閉じる</a></p>
        <button type="button" class="cartBtn">cartへ入れる</button>
      </div>
      <!-- モーダルウィンドウのコンテンツ終了 -->
    </div>

    <section class="header-top-section">
        <div class="container">
            <div class="row">
                <div  class="col-md-6">
                    <div class="header-top-content">
                        <ul class="nav nav-pills navbar-left">
                            <li><a href="#"><i class="pe-7s-call"></i><span>123-123456789</span></a></li>
                            <li><a href="#"><i class="pe-7s-mail"></i><span> info@mart.com</span></a></li>
                        </ul>
                    </div>
                </div>
                <div  class="col-md-6">
                    <div class="header-top-menu">
                        <ul class="nav nav-pills navbar-right">
                            <!-- 履歴ページへ遷移 -->
                            <li><a th:href="@{/limited/log/{id}(id=${user.id})}">My Purchase Log</a></li>
                            <!-- カートページへ遷移 -->
                            <li><a th:href="@{/cart}">Cart</a></li>
                            <!-- ログアウト -->
                            <li><form th:action="@{/logout}" method="post"><input type="submit" value="logout" style="border:none;background-color:transparent;text-decoration:none;" class="logoutBtn"/></form></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

        <header class="header-section">
            <nav class="navbar navbar-default">
                <div class="container">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"><b>L</b>imited</a>
                    </div>
                </div>
            </nav>
        </header>

        <section class="search-section">
            <div class="container">
                <div class="row subscribe-from">
                    <div class="col-md-12">
                        <form class="form-inline col-md-12 wow fadeInDown animated">
                            <div class="form-group">
                                <input type="email" class="form-control subscribe" id="email" placeholder="Search..."/>
                                <button class="suscribe-btn" ><i class="pe-7s-search"></i></button>
                            </div>
                        </form><!-- end /. form -->
                    </div>
                </div><!-- end of/. row -->
            </div><!-- end of /.container -->
        </section><!-- end of /.news letter section -->
        <!--一覧-->
        <div id="listBox">
            <!--each分でくりかえす(宮嶋)-->
            <div class="productBox" th:each="shoe : ${shoes}">
                <img class="shoeImage" src="images/スニーカー3.jpg" alt="productImage"/>
                <a th:text= "${shoe.name}" class="shoeName">AirMAX</a>
                <a th:text = "${shoe.price}" class="shoePrice">￥10,000</a>
                <button type="button" id="modal-open" class="button-link">詳細</button>
            </div>
            <!--デモ用のダミー-->
            <div class="productBox" >
                <img class="shoeImage" src="images/スニーカー3.jpg" alt="productImage"/>
                <a class="shoeName">AirMAX</a>
                <a  class="shoePrice">￥10,000</a>
                <button type="button" id="modal-open" class="button-link">詳細</button>
            </div>
            <div class="productBox">box</div>
            <div class="productBox">box</div>
            <div class="productBox">box</div>
            <div class="productBox">box</div>
            <div class="productBox">box</div>
            <div class="productBox">box</div>
        </div>
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <p class="center">Made with <i class="fa fa-heart"></i> by <a href="#" target="_blank">Revolthemes</a>. All Rights Reserved</p>
                        
                    </div>
                </div>
            </div>
        </footer>
​
        <!-- JQUERY -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="js/list.js" th:src="@{/js/list.js}"></script>
    </body>
</html>
