{{!
{
  "name" : "Designer",
  "decription" : "Designer layout",
  "styles" : ["designer", "fonts"]
}
}}
{{#isnt mode 'preview'}}
  <ul id="designerTabs" class="nav nav-tabs">
    <li class="active"><a href="#front" data-toggle="tab">Front</a></li>
   <!--  <li><a href="#back" data-toggle="tab">Card</a></li>
    <li><a href="#envelopes" data-toggle="tab">Envelopes</a></li> -->
  </ul>

  {{> template_helpModal }}
  {{> template_saveDesignModal }}
{{/isnt}}

<div class="tab-content">

  <div class="tab-pane active" id="front">

    {{#isnt mode 'preview'}}
      <div class="container column left">
        <!-- Sidebar container -->
        <div id="sidebar" class="accordion">
          <!-- Dynamitcally filled with items from module [sidebar.js] -->
        </div>
      </div>
    {{/isnt}}

    <div id="centerColumn" class="container column center">
      <!-- Spinner -->
      <div id="spinner">
          <div class="loading"></div>
          <div id="loading-text">loading</div>
      </div>
      <!-- Actual preview / editor canvas renders -->
      <div id="paper"></div>
    </div>

    {{#isnt mode 'preview'}}
      <div class="container column right">
        {{> template_userPhotos}}
      </div>
    {{/isnt}}
  </div>

<!-- Back tab -->
{{#isnt mode 'preview'}}
  <div class="tab-pane" id="back">what do we put for backs?</div>

  <!-- Envelopes tab -->
  <div class="tab-pane" id="envelopes">what do we put for envelopes?</div>
{{/isnt}}
</div>

<!-- Visible on all tabs -->
{{#isnt mode 'preview'}}
<div class="container row bottom">
  <!-- Need to be moved to it's own module -->

  <div class="text">
      Need help? Call us at <em>877.238.9458</em> or sent us an <a href="#" data-toggle="modal" data-target="#helpModal">email</a>.
  </div>

  <!-- Buttons -->
  <div id="controls">
    <p>
      <!-- <button class="btn" type="button">Reset to defaults</button> -->
      <button class="btn" type="button" data-toggle="modal" data-target="#helpModal">Help</button>
      <button class="btn" type="button" data-toggle="modal" data-target="#saveDesignModal">Save design</button>
      {{#is mode 'editing:admin'}}
        <button id="exportDesign" class="btn btn-warning" type="button">Export</button>
      {{else}}
        <button id="orderButton" class="btn btn-warning" type="button">Order</button>
      {{/is}}
    </p>
  </div>
</div>
{{/isnt}}