<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>