<div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">

    <div class="row">

      <header class="clearfix">
        <div class="col-sm-4 logo">
          <img src="images/logo.png" alt="Logo Mobile World" />
        </div>
        <div class="col-sm-2">
          <ul class="social-share clearfix">
            <li>
              <a href="#">
                <i class="fa fa-facebook"></i>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="fa fa-twitter"></i>
              </a>
            </li>
          </ul>
        </div>
        <div class="col-sm-6 clearfix" style="padding-right: 0">
          <div class="pull-left">
            <ul class="top-menu clearfix">
              <li>

                <a href="#">はじめての方へ</a>

              </li>
              <li>

                <a href="#">料金表</a>

              </li>
              <li>

                <a href="#">新規会員登録</a>

              </li>
            </ul>
            <ul class="top-control clearfix">
              <li>
                <div class="bt-yellow">

                  <i class="fa fa-shirtsinbulk" aria-hidden="true"></i> DESIGN　デザイン作成

                </div>
              </li>
              <li>
                <div class="bt-yellow">

                  <i class="fa fa-shopping-cart" aria-hidden="true"></i> ショッピングカート

                </div>
              </li>
            </ul>
          </div>
          <div class="pull-right">
            <div class="user-control">
              <div>

                マイページ

              </div>

              <div class="login">
                <i class="fa fa-lock" aria-hidden="true"></i> ログイン

              </div>
            </div>
          </div>

        </div>
      </header>
      <nav class="clearfix">
        <div class="col-sm-12">
          <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
          <ul class="pull-right">

            <li class="circle"><a href="#">商品に戻る</a></li>
            <li class="line"></li>
            <li class="circle"><a href="#">加工方法に戻る</a></li>
            <li class="line line-action"></li>
            <li class="circle action"><a href="#">デザインする</a></li>

          </ul>
        </div>
      </nav>

      <div style="height: 29px; width: 100%; background: url('images/linebg.png') repeat-x">

  
      </div>

      <article class="clearfix">

          <aside class="col-sm-5">

            <div class="clearfix row" style="position: relative">
              <div class="step col-xs-6">
                <div class="title clearfix">

                  <span><img src="images/stepicon1.png" alt="1" /></span> <span>デザインを作る</span>

                </div>
                <div class="step-box">
                  <div class="tshirt-design clearfix">
                    <div class="icon">
                      <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
                    </div>

                      <div class="name">
                        背中背中 (28x22)
                      </div>
                      <div class="action">
                        <button class="yellow2" ng-click="modalTShirtDesign()">
                          デザインを作る
                        </button>
                      </div>

                  </div>

                </div>
              </div>

              <!--&lt;!&ndash;  BREAK DOWN&ndash;&gt;-->
              <div class="text-center break-left">
                <img src="images/arrow1.png" alt="arrow" />

              </div>

  
              <!-- STEP 2-->
              <div class="step col-xs-6">
                <div class="title clearfix">

                  <span><img src="images/stepicon2.png" alt="2" /></span><span> アイテムカラーを変更する</span>

                </div>

                <div class="step-box clearfix" style="min-height: 150px;">

                  <div class="tshirt-color">
                    <ul class="choice-color clearfix">
                      <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
                        <div ng-style="{'background-color' : color.code}"></div>
                      </li>
                    </ul>

                  </div>
                  <div class="choice-color-bottom">

                    <div class="color-name" ng-bind="tShirtColorName"></div>
                    <div class="view-more">

                      在庫確認

                    </div>

                  </div>

                </div>
              </div>
            </div>

            <!--  BREAK DOWN-->
            <div class="text-center break-down">

              <img src="images/arrow2.png" alt="arrow" />

            </div>

            <!-- STEP 3-->
            <div class="step">
              <div class="step-box clearfix">
                <div class="tshirt-saveorder">
                  <div class="clearfix">
                    <div class="action">
                      <button class="white">

                          このデザインを保存する

                      </button>
                    </div>
                    <div class="action">

                      <button class="yellow1">

                          このデザインで注文する

                      </button>
                    </div>

                  </div>

                </div>

              </div>

              <!-- BREAL LINE-->
              <div class="text-center break-line">
                <hr />
              </div>

              <!-- STEP 4-->
              <div class="step">
                <div class="title-notice">

                  <strong>商品・デザインの変更はこちら</strong> <span class="require">作業中のデザインは破棄されます</span>

                </div>
                <div class="step-box">
                  <div class="change-design">
                    <table>
                      <tr>
                        <td class="text-center">商品</td>
                        <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td>

                        <td class="text-center">
                          <button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button>

                        </td>
                      </tr>
                      <tr>
                        <td width="10%" class="text-center">加工方法</td>
                        <td width="70%">シルク：胸中央 (27×27)</td>

                        <td width="20%" class="text-center">
                          <button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button>

                        </td>
                      </tr>
                    </table>
                  </div>
                </div>

              </div>

              <!-- STEP 5- finish-->
              <div class="step">
                <div class="finish-design">
                  <button class="white">
                    自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                  </button>

                </div>

              </div>
            </div>

          </aside>
          <section id="tshirt-content" class="col-sm-7 text-center">

            <div class="switch-border-design" ng-click="hideShowReviewDesign()">

              <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す

            </div>
            <div class="tshirt-image">

              <img ng-src="{{ tShirtImg }}" alt="" />

              <div ng-class="placeTshirt.place" id="preview-design" ng-style="hideReviewDesign == true ? {border: 0} : {}" ng-show="(placeTshirt.face === tShirtChoiceBackFrontKey)" ng-click="modalTShirtDesign()">

                <img ng-src="{{outputImage}}" ng-show="outputImage"/>
              </div>

            </div>
            <div class="tshirt-choice">
              <ul>

                <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">

                  <div>前</div>

                  <div class="image" ng-click="choiceTShirtBackFront('front')">
                    <img ng-src="{{ tShirtImgFront }}" alt="" />

                  </div>
  
                </li>

                <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">

                  <div>後</div>

                  <div class="image"  ng-click="choiceTShirtBackFront('back')">
                    <img ng-src="{{ tShirtImgBack }}" alt="" />

                  </div>

                </li>
              </ul>

            </div>

          </section>

      </article>

      <footer class="clearfix">
        <ul class="nav-footer">
          <li><a href="#">店舗検索</a></li>
          <li><a href="#">お客様窓口</a></li>
          <li><a href="#">企業情報</a></li>
          <li><a href="#">採用情報</a></li>
          <li><a href="#">プライバシーポリシー</a></li>
        </ul>

        <div class="logo-bottom">

          <img src="images/logobottom.png" alt="Logo" />

        </div>

      </footer>

      <div class="footer text-center">
        Copyright &copy; CREVASSE - All Rights Reserved
      </div>

      <!--MODAL CONTENT-->

      <div ng-include="designFrameView"></div>

    </div>

  </div>