<link rel="import" href="../core-field/core-field.html">
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../core-input/core-input.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-button/paper-button.html">

<polymer-element name="my-element">

  <template>
    <style>
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_card {
        padding: 20px;
        position: absolute;
        width: 800px;
        height: 300px;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 4px 8px, rgba(0, 0, 0, 0.0980392) 0px 0px 6px;
        left: -10px;
        top: 40px;
        border-color: rgb(255, 0, 0);
        margin: 20px;
        background-color: rgba(0, 0, 200, 0.298039);
      }
      #paper_input {
        font-size: 30px;
      }
      #paper_slider {
        font-size: 20px;
      }
      #paper_input /deep/ .label-text {
        font-size: 1em;
        text-align: center;
      }
      #paper_input /deep/ #input {
        text-align: center;
      }
      .form_label {
        font-size: 2rem;
        text-align: right;
      }
      #paper_button {
        font-size: 2rem;
      }
    </style>
    <core-card id="core_card" class="core_card">
      <div id="div1" layout vertical>
        <div id="div2" layout horizontal flex one>
          <label id="label" class="form_label" flex one>Number</label>
          <core-field 4 id="core_field" center horizontal layout flex four>
            <paper-slider pin value="{{ $.paper_input.value }}" min="-100" id="paper_slider" flex three> </paper-slider>
            <paper-input value="39" id="paper_input" flex one>   </paper-input>
          </core-field>
        </div>
        <div id="div3" layout horizontal flex one>
          <label id="label1" class="form_label" flex one>Type</label>
          <paper-dropdown-menu id="job_profile_dropdown" flex four>
            <paper-dropdown id="paper_dropdown" class="dropdown">
              <core-menu selected="1" selectedindex="1" id="core_menu" class="menu">
                <paper-item id="paper_item">TEST: H264 to HLS Muti-Rate</paper-item>
                <paper-item active id="paper_item1">TEST: 4k HEVC (Multi-Node)</paper-item>
              </core-menu>
            </paper-dropdown>
          </paper-dropdown-menu>
        </div>
        <div id="div4" layout horizontal flex two>
          <div flex six></div>
          <paper-button raised id="paper_button" on-tap="{{ ontap }} flex one">Add Jobs</paper-button>
        </div>
      </div>
    </core-card>
  </template>

  <script>

    Polymer({

    });

  </script>

</polymer-element>