mitjajez/SONCE

<template name="Circuits_show">
{{#HammerTouchArea gestureMap=templateGestures}}
  <section class="page circuits-show {{actingClass}}">
    <header>
    <nav class="navbar">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">
            <img alt="SONCE" src="/sonce-150.png" height="20px">
          </a>
          <button type="button" class="navbar-toggle collapsed"
          data-toggle="collapse" data-target="#top-navigation" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-menu" title={{_ 'Show Menu'}}></span>
          </button>
        </div>

        <div class="collapse navbar-collapse" id="top-navigation">
          <p class="navbar-text">
            <a class="js-favourite-circuit" href="#favourite"
            title="{{_ 'Favourite Circuit'}}">
              <span class="icon-star-empty {{favourite}}"></span>
            </a>
            {{circuit.name}}
          </p>


          <!-- right part of navigation -->
          <div class="nav navbar-nav navbar-right btn-toolbar" role="toolbar" aria-label="...">
            <div class="btn-group" role="group-sm" aria-label="...">
              <button class="js-view-circuit btn btn-default navbar-btn {{#if viewing}}active{{/if}}" type="text">
                <span class="icon-eye"></span>
              </button>
              <button class="js-edit-circuit btn btn-default navbar-btn {{#if editing}}active{{/if}}" type="text">
                <span class="icon-pencil"></span>
              </button>
              <button class="js-wire-circuit btn btn-default navbar-btn {{#if wiring}}active{{/if}}" type="text">
                <span class="icon-chart"></span>
              </button>
            </div>
          </div>

        </div>
      </div>
    </nav>
    </header>

    <div class="circuit-canvas content">
    <svg class="js-circuit-canvas circuit-items" width="100%" height="100%"
      preserveAspectRatio="xMinYMin meet">

      <defs>
        <marker id="activeWireEnd"
                markerWidth="8" markerHeight="8"
                refX="4" refY="4">
          <circle class="connector" cx="4" cy="4" r="3" fill="black" opacity=".5">
            <animate dur="2s" attributeName="opacity" values=".7; .3; .7" repeatCount="indefinite" />
          </circle>
        </marker>

        <marker id="wireLabel"
                markerWidth="20" markerHeight="8"
                refX="10" refY="4">
          <text class="connector" x="0" y="0" >wire</text>
        </marker>
      </defs>

      {{> Ruler (rulerArgs)}}

      {{#if subscriptionsReady}}
      <g class="js-circuit" transform="translate({{pan.x}},{{pan.y}}) scale({{zoom}})">

        {{#if wiring}}
          <path class="js-active-wire active-wire wire"
          marker-end="url(#activeWireEnd)" />
        {{/if}}

        {{#if adding}}
          {{> Active_element}}
        {{/if}}

        {{#each wire in wires}}
          {{> Wires_item (wireArgs wire)}}
        {{/each}}

        {{#each element in elements}}
          {{> Elements_item (elementArgs element)}}
        {{else}}
          <text class="title-message" transform="translate(50,150)">
            {{_ 'No elements here'}}
          </text>
          <text class="subtitle-message" transform="translate(50,200)">
            {{_ 'Add new elements using the \'+\' button in tools bar'}}
          </text>
        {{/each}}

        {{> Active_pin}}

        {{#if editing }}
          {{#if selectedElement }}
            <!-- element menu -->
            {{> Element_edit_menu (elementMenuArgs "")}}
          {{/if}}
          {{#if selectedWire }}
            <!-- wire menu -->
            {{> Wire_edit_menu (wireMenuArgs "")}}
          {{/if}}

          {{> Operations}}
        {{/if}}
      </g>

        {{#if viewing }}
          {{#if selectedElement }}
            {{> Element_info (elementMenuArgs "")}}
          {{/if}}
          {{#if selectedWire }}
            <!-- {{> Wire_info (wireMenuArgs "")}} -->
          {{/if}}

        {{/if}}
      {{else}}
          <text class="title-message">{{_ 'Loading elements...'}}</text>
      {{/if}}
    </svg>
    </div>
    <footer>
      <nav class="navbar">
        <div class="container-fluid">
          <div class="row">
            <div class="navbar-header">
              {{>Command_box}}

              <button type="button" class="navbar-toggle collapsed"
              data-toggle="collapse" data-target="#status-row" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-menu" title={{_ 'Show status row'}}></span>
              </button>
            </div>
            <div class="collapse navbar-collapse" id="status-row">
              <p class="navbar-text">
                <span class="icon-target"></span> {{mouse.x}}, {{mouse.y}}
              </p>

              {{#if wiring}}
              <p class="navbar-text">
                {{wiringMode}}
              </p>
              {{/if}}

              {{#if selection}}
              <p class="navbar-text">
                <span class="icon-marquee" title="{{active}}: {{selection}}"></span>
                <span class="js-cancel-selection icon-cancel" title={{_ 'Cancel'}}></span>
              </p>
              {{/if}}

              <form class="js-set-zoom zoom-box navbar-form navbar-right">
                <div class="input-group input-group-sm">
                  <div class="input-group-btn">
                    <button class="js-zoom-out btn btn-default"
                    title={{_ 'Zoom out'}} type="button">
                      <span class="icon-zoom-out"></span>
                    </button>
                  </div>
                  <input class="form-control" name="zoom" type="text"
                  value="{{viewZoom}} %">
                  <div class="input-group-btn">
                    <button class="js-zoom-in btn btn-default"
                    title={{_ 'Zoom in'}} type="button">
                      <span class="icon-zoom-in"></span>
                    </button>
                  </div>
                </div>
              </form>
              <p class="navbar-text navbar-right">
                {{viewPan}}
              </p>
            </div>
          </div>
        </div>
      </nav>
    </footer>

  </section>
{{/HammerTouchArea}}
</template>