<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <style>#wrapper[hidden] {
    display: block;
  }

  #component-interface {
  }</style>
  <link href="../../dropzone/dropzone.bundle.css" rel="stylesheet" data-tilepieces-component="tilepieces/dropzone">
  <link href="../../tabs/tabs.css" rel="stylesheet" data-tilepieces-component="tilepieces/tabs">
  <link href="../../stylesheet/css.css" rel="stylesheet" data-tilepieces-component="tilepieces/stylesheet">
  <link href="../css/css.css" rel="stylesheet" data-tilepieces-component="tilepieces/element-panel"
        data-tilepieces-current-stylesheet="">
</head>
<body>
<div id="wrapper" hidden="" data-tilepieces-component="tilepieces/element-panel">
  <div class="tab-buttons tab-horizontal" id="tabs">
    <a class="tab-prev" href="javascript:void(0)">...</a>
    <a class="tab-next" href="javascript:void(0)">...</a>
    <div class="tab-buttons-wrap">
      <div class="tab-buttons-inside">
        <a href="#main" class="selected">Main</a><a href="#children">Children</a>
        <a href="#component-interface">Component Interface</a>
      </div>
    </div>
  </div>
  <section id="main">
    <div id="attributes">
      <div class="attributes-node-name">
        <fieldset>
          <legend><label for="node-name">Node Name:</label></legend>
          <div class="flex-box">
            <input name="node-name" id="node-name" data-bind="nodeName" ${{nodenamedisabled}}="">
            <button id="remove-element" ${{nodenamedisabled}}="">-</button>
          </div>
          <small ${{notmatch}}="">${{not_matching_phrase}}</small>
          <small ${{nodenameinvalid}}="">${{node_name_invalid_explanation}}</small>
        </fieldset>
      </div>
      <div data-isolate="">
        <fieldset id="classes">
          <legend>
            <label for="new-class">Classes:</label></legend>
          <form id="new-class" class="flex-box">
            <input placeholder="Add new class" ${{canadd}}="" data-bind="newClassName" data-bind-events="input" list="classes-in-css">
            <datalist id="classes-in-css">
            </datalist>
            <button type="submit">OK</button>
          </form>
          <small ${{classinvalid}}="">${{classinvalid_phrase}}</small>
          <div class="attributes-mask">
            <label data-foreach="classes" for="class_${{key.index}}">
              ${{key.name}}
              <input type="checkbox" id="class_${{key.index}}" class="classes-checkbox" data-index="${{key.index}}"
                     data-value="${{key.name}}" data-bind="key.checked" ${{canadd}}="">
            </label>
          </div>
        </fieldset>
      </div>
      <fieldset class="attributes">
        <legend>
          <span>Attributes:</span>
          <button id="add-attribute" disabled="">+</button>
        </legend>
        <ul id="attributes-view" style="display:${{isVisible}}">
          <li data-foreach="attributes">
            <fieldset>
              <legend>
                <input class="attribute-name" value="${{key.name}}" data-value="${{key.value}}"
                       data-prev="${{key.name}}" data-index="${{key.index}}" ${{key.disabled}}="">
                <button class="remove-attr" data-index="${{key.index}}" ${{key.disabled}}="">-</button>
              </legend>
              <div class="flex-box ${{key.classSrc}}">
                <input class="attribute-value" data-key="${{key.name}}" value="${{key.value}}"
                       data-index="${{key.index}}" ${{key.disabled}}="" ${{key.dropzone}}="">
                <button class="search-button" data-type="img">🔎</button>
                <button class="go-to-component"  data-href="${{key.packageLink}}">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" viewBox="0 0 15 15">
                  <g>
                    <g>
                      <g>
                        <path style="fill:#666;" d="M8.8,10c-1.1,0-2.3-0.5-3-1.5C5.6,8.3,5.7,7.8,5.9,7.6c0.3-0.2,0.7-0.1,0.9,0.1
                      c0.8,1.1,2.4,1.3,3.5,0.5c0.1-0.1,2.1-2.1,2.1-2.1c0.9-1,0.9-2.6-0.1-3.5s-2.5-0.9-3.5,0L7.8,3.7c-0.3,0.3-0.6,0.3-0.9,0
                      c-0.3-0.3-0.3-0.6,0-0.9L8,1.7c1.4-1.4,3.8-1.4,5.2,0c1.5,1.4,1.5,3.8,0.1,5.3c0,0-2.1,2.1-2.3,2.3C10.4,9.8,9.6,10,8.8,10z"></path>
                      </g>
                      <g>
                        <path style="fill:#666;" d="M4.5,14.3c-0.9,0-1.9-0.4-2.6-1.1c-1.5-1.4-1.5-3.8-0.1-5.3c0,0,2.1-2.1,2.3-2.2
                      c0.8-0.6,1.8-0.9,2.8-0.7c1,0.1,1.9,0.7,2.4,1.4c0.2,0.3,0.1,0.7-0.1,0.9C8.8,7.6,8.4,7.5,8.2,7.3c-0.4-0.6-1-0.9-1.6-1
                      C5.9,6.1,5.3,6.3,4.7,6.8C4.6,6.8,2.6,8.9,2.6,8.9c-0.9,1-0.9,2.6,0.1,3.5s2.5,0.9,3.5,0l1.1-1.1c0.3-0.3,0.6-0.3,0.9,0
                      c0.3,0.3,0.3,0.6,0,0.9L7,13.3C6.3,14,5.4,14.3,4.5,14.3z"></path>
                      </g>
                    </g>
                  </g>
                </svg>
                </button>
              </div>
            </fieldset>
          </li>
        </ul>
      </fieldset>
    </div>

  </section>
  <section id="children" hidden="">
    <ul>
    </ul>
  </section>
  <section id="component-interface" hidden="">
    <fieldset>
      <legend><label>associated components</label></legend>
      <select data-bind="interfaceAssociated" id="interfaces-associated">
        <option data-foreach="interfaces" value="${key.name}">${key.name}</option>
      </select>
    </fieldset>
    <div data-foreach="interfaces" class="component-interface-iframe-container ${key.selected}">
      <iframe data-src="${key.interface}" data-index="${key.index}" class="${key.selected}"></iframe>
    </div>
  </section>
</div>
<section id="element-sum" class="tab-buttons tab-horizontal" data-tilepieces-component="tilepieces/element-panel">
  <a class="tab-prev" href="javascript:void(0)">←</a>
  <a class="tab-next" href="javascript:void(0)">→</a>
  <div class="tab-buttons-wrap">
    <div class="tab-buttons-inside" id="inside-path">
    </div>
  </div>
</section>
<script src="../../../element-panel.bundle.js" data-tilepieces-component="tilepieces/element-panel"></script>
</body>
</html>