<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/logo_mobile_world.png" alt="Logo Mobile World" />
        MOBILE WORLD
      </div>
    </header>
    <nav class="clearfix">
      <div class="col-sm-12">
        <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
        <ul class="pull-right">
          <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
          <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
          <li class="action">デザインする</li>
        </ul>
      </div>
    </nav>
    <article class="clearfix">
        <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 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 class="color-name" ng-bind="tShirtColorName"></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 ng-src="{{ tShirtImg }}" alt="" />
          </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>
    </footer>

    <!--MODAL CONTENT-->
    <div ng-include="designFrameView"></div>
  </div>


</div>
