<div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">
  <div class="row">
    <header>
      <div class="logo">
        <img src="images/uniqlo_logo.png" alt="Logo Uniqlo" />
        Uniqlo Customize
      </div>
    </header>
    <nav class="clearfix">
      <div class="col-sm-12">
        <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
        <ul class="pull-right">
          <li><a href="#">商品に戻る</a></li>
          <li><a href="#">加工方法に戻る</a></li>
          <li class="action">デザインする</li>
        </ul>
      </div>
    </nav>
    <article>

        <aside class="col-sm-5">
          <div class="step">
            <div class="title">
              1. デザインを作る
            </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="red" ng-click="modalTShirtDesign()">
                    <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!--  BREAK DOWN-->
          <div class="text-center break-down">
            <img src="images/bg_step_arrow.gif" alt="arrow" />
          </div>

          <!-- STEP 2-->
          <div class="step">
            <div class="title">
              2.アイテムカラーを変更する
            </div>
            <div class="step-box clearfix">
              <div class="tshirt-color">
                <ul class="choice-color clearfix">
                  <li class="white"><div></div></li>
                  <li class="blue"><div></div></li>
                </ul>
                <div class="color-name">
                  color: 00 WHITE
                </div>
                <div class="view-more">
                  在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                </div>
              </div>
            </div>
          </div>

          <!--  BREAK DOWN-->
          <div class="text-center break-down">
            <img src="images/bg_step_arrow.gif" 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">
                      <div class="text">
                        このデザインを保存する
                      </div>
                      <div class="arrow">
                        <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                      </div>
                    </button>
                  </div>
                  <div class="action">
                    <button class="red">
                      <div class="text">
                        このデザインで注文する
                      </div>
                      <div class="arrow clearfix">
                        <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                      </div>
                    </button>
                  </div>
                </div>
                <div class="notice">
                  デザインを保存するには、ログインしてください
                </div>
              </div>
            </div>

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

            <!-- STEP 4-->
            <div class="step">
              <div class="title-notice">
                商品・デザインの変更はこちら <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-right">
                        <button class="brown"><i class="fa fa-caret-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-right">
                        <button class="brown"><i class="fa fa-caret-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">
            <i class="fa fa-square-o" aria-hidden="true"></i> 替えます
          </div>
          <div class="tshirt-image">
            <img src="images/t-shirt/front.png" alt="" />
          </div>
          <div class="tshirt-choice">
            <ul>
              <li class="front focus">
                <div>前</div>
                <div class="image">
                  <img src="images/t-shirt_icon/tshirt1-front.png" alt="" />
                </div>

              </li>
              <li class="back">
                <div>後</div>
                <div class="image">
                  <img src="images/t-shirt_icon/tshirt1-back.png" alt="" />
                </div>

              </li>
            </ul>
          </div>
        </section>

    </article>

    <!--MODAL CONTENT-->
    <div ng-include="'views/tshirt-design.html'"></div>
  </div>


</div>