<polymer-element name="noflo-new-project" class="modal-content">
  <template>
    <h1>Create new project</h1>
    <form>
      <label>
        Project name
        <input type="text" value="{{ name }}" placeholder="my-project" required>
      </label>
      <label>
        Primary Type
        <select name="type" value="{{ type }}">
          <option value="html">Browser</option>
          <option value="websocket">Node.js</option>
          <option value="websocket">Microcontroller</option>
        </select>
      </label>
      <div class="toolbar">
        <button on-click="{{ send }}">Create</button>
        <a on-click="{{ close }}">Cancel</a>
      </div>
    </form>
  </template>
  <script>
    Polymer('noflo-new-project', {
      name: '',
      type: 'html',
      enteredView: function () {
        document.getElementById('container').classList.add('blur');
      },
      leftView: function () {
        document.getElementById('container').classList.remove('blur');
      },
      send: function (event) {
        if (event) {
          event.preventDefault();
        }
        this.fire('new', {
          name: this.name,
          type: this.type,
          graphs: [],
          components: []
        });
        this.close();
      },
      close: function () {
        if (!this.parentNode) {
          return;
        }
        this.parentNode.removeChild(this);
      }
    });
  </script>
</polymer-element>

<polymer-element name="noflo-new-project" class="modal-content">
  <template>
    <h1>Create new project</h1>
    <form>
      <label>
        Project name
        <input type="text" value="{{ projectId }}" placeholder="my-project" required>
      </label>
      <label>
        Project label
        <input type="text" value="{{ name }}" placeholder="My Cool Project" required>
      </label>
      <label>
        Primary Type
        <select name="type" value="{{ type }}">
          <option value="html">Browser</option>
          <option value="websocket">Node.js</option>
          <option value="websocket">Microcontroller</option>
        </select>
      </label>
      <div class="toolbar">
        <button on-click="{{ send }}">Create</button>
        <a on-click="{{ close }}">Cancel</a>
      </div>
    </form>
  </template>
  <script>
    Polymer('noflo-new-project', {
      projectId: '',
      name: '',
      type: 'html',
      enteredView: function () {
        document.getElementById('container').classList.add('blur');
      },
      leftView: function () {
        document.getElementById('container').classList.remove('blur');
      },
      send: function (event) {
        if (event) {
          event.preventDefault();
        }
        this.fire('new', {
          id: this.projectId.replace(' ', '-'),
          name: this.name,
          type: this.type,
          graphs: [],
          components: []
        });
        this.close();
      },
      close: function () {
        if (!this.parentNode) {
          return;
        }
        this.parentNode.removeChild(this);
      }
    });
  </script>
</polymer-element>

Allow users to type a nicer ID for projects
Allow users to type a nicer ID for projects
