kube-new-container.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-shadow/paper-shadow.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">

<polymer-element name="kube-new-container" attributes="data idx">
  <template>
    <style>
      :host {
        display: inline-block;
        vertical-align: top;
        background: white;
        width: 20%;
        min-width: 300px;
        max-width: 400px;
        position: relative;
        margin: 0 16px 20px 0;
        border-radius: 2px;
        padding: 10px 30px 20px 20px;
      }
      paper-input {
        width: 100%;
      }
      #close {
        position: absolute;
        top: 5px;
        right: 5px;
        color: rgba(0,0,0,0.54);
      }
    </style>
    <paper-input floatingLabel required
      label="Name: myNginx" value="{{data.name}}">
    </paper-input>
    <paper-input floatingLabel required
      label="Image: dockerfile/nginx" value="{{data.image}}">
    </paper-input>
    <paper-input floatingLabel
      label="Command" value="{{data.command}}">
    </paper-input>
    <paper-input floatingLabel
      label="Ports: 8080:80, 9090:8081" value="{{data.ports}}">
    </paper-input>
    <paper-input floatingLabel
      label="Environment: FOO=bar, X=yz" value="{{data.env}}">
    </paper-input>
    <paper-icon-button id="close" icon="close"
      on-click="{{remove}}">
    </paper-icon-button>
    <paper-shadow z="1"></paper-shadow>
  </template>
  <script>
    Polymer({
      remove: function() {
        this.fire('remove-me')
      }
    });
  </script>
</polymer-element>