<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.13/lib/index.js"></script>
<div id="app">
  <template>
    <h2><span style="font-weight: bold;">Operator Feature | Stage 1 - </span> Input & Storage</h2>

    <h3>Goal</h3>
    <p>Users need a way to specify which operator is associated with the data of a video clip. Rather than forcing them to write the operator name and ID everytime, we should save this information to their account for reusability.</p>

    <h3>Method</h3>
    <p>1. Use a <code>select</code> input element to specify operator in the <span class="blue">Left-Side Panel</span> and the <span class="blue">Review Modal</span> of the <span style="font-weight: bold;">Annotator.</span></p>
    <p>2. Add a <code>table</code> in <span style="font-weight: bold;">User Settings ></span> <span class="blue">People</span> or as it's own page for management operations.</p>

    <h3>Select Existing or Create New Operators</h3>
    <p>Create and select new operators that are not included in select options.</p>

    <div class="description" style="display: flex; flex-direction: row; justify-content: space-evenly; gap: 2em;">

      <div style="display: flex; flex-direction: column; justify-content: center; width:250px; border-right: 1px dashed #ddd; padding-right: 5em;">
        <el-button type="text" size="medium">
          + Add Operator
        </el-button><span style="font-size: 14px; color: #B7BBC3; align-self: center; padding-inline-start: 1rem;">*adding an operator is optional, so only show input menu element on click</span>
      </div>

      <div class="pop-menu">

        <ul>
          <li class="menu-item">
            <el-select v-model="value" filterable clearable allow-create default-first-option placeholder="Select Operator">

              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                <span>{{ item.label }}</span>
                <code>{{ item.value }}</code>
              </el-option>

            </el-select>
          </li>
          <li class="menu-item">
            <el-input placeholder="Operator ID" v-model="input1">
              <template slot="prepend">ID#</template>
            </el-input>
            <span style="font-size: 14px; color: #B7BBC3; align-self: center;">*autofill ( target focus when id = <em>null</em> )</span>
          </li>

        </ul>

        <div style="border-top: 1px solid #ddd; padding-top: 8px; justify-content: flex-end;" class="d-flex">

          <el-button plain>Save</el-button>
          <el-button type="info" plain>Cancel</el-button>

        </div>
      </div>

    </div>

    <div class="tip">
      <p>Filter by both <code>label</code> (operator name) and <code>value</code> (operator ID).</p>
      <p>Operator select should have <code>filterable</code>, <code>allow-create</code>, and <code>clearable</code>.</p>
    </div>

    <div class="description">

      <p>Preview Example for Left-Side Panel after Save when in Annotator</p>
      <div class="preview">
        <div class="bar">
          <span class="material-symbols-outlined folder-icon">
            folder
          </span>
          Project Name
          <el-button-group>
            <el-button type="primary" size="small">Submit</el-button>
            <el-button type="primary" icon="
el-icon-arrow-down el-icon-down" size="small" style="height: 30px;"></el-button>
          </el-button-group>
        </div>
        <p style="display: flex; align-items: center; gap: 5px;"><span style="color: #B7BBC3; margin-right: 1em;">Operator</span> <code>Operator Name</code>
          <el-button type="text" size="mini">
            <span class="material-symbols-outlined" style="margin-left: 1rem; font-size: 18px; color: gray;">
              close
            </span>
          </el-button>
        </p>
      </div>
    </div>

    <h3>View and Manage Operators</h3>
    <p>Create, Read, Update, and Delete operations need to be available to users.</p>
    <div class="description">
      <el-table :data="tableData" style="width: 100%" max-height="250">
        <el-table-column fixed prop="name" label="Name" width="200">
        </el-table-column>
        <el-table-column prop="id" label="Id">
        </el-table-column>
        <el-table-column fixed="right" label="Operations" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small">
              Edit
            </el-button>
            <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
              Remove
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
</div>

@import url("//unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css");

body {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}

#app {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: 1.2rem;
  margin-block-start: 3em;
  margin-block-end: 4em;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
}

.folder-icon {
  color: #409eff;
}

.preview {
  background: #f9f9f9;
  padding: 1.2rem;
  border-radius: 8px;
}

.bar {
  display: grid;
  grid-template-columns: 30px 1fr 125px;
  align-items: center;
  gap: 8px;
}

.tip {
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 20px 0;
}

p {
  font-size: 14px;
  color: #5e6d82;
  line-height: 1.5em;
}

.tip code {
  background-color: hsla(0, 0%, 100%, 0.7);
  color: #445368;
}

code {
  padding: 0 4px;
  border: 1px solid #eaeefb;
  border-radius: 4px;
}

h3 {
  margin: 55px 0 20px;
}
h2,
h3,
h4,
h5 {
  font-weight: 400;
  color: #1f2f3d;
}
h2 {
  font-size: 28px;
}
h3 {
  font-size: 22px;
}

ul {
  list-style: none;
  padding-inline-start: 0;
  margin-block: 8px;
}

.menu-item {
  padding: 8px 8px;
}

.description {
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  font-size: 14px;
  line-height: 22px;
  color: #666;
  word-break: break-word;
  background-color: #fff;
  margin-block-end: 3em;
}

.el-select {
  width: 100%;
}

.el-select-dropdown__item {
  display: grid;
  grid-template-columns: 1fr 54px;
  gap: 8px;
}

.blue {
  color: #409eff;
  font-weight: bold;
}

.pop-menu {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-items: flex-start;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  padding: 6px;
  width: 280px;
  box-shadow: 0 10px 20px rgba(64, 64, 64, 0.15);
}

.d-flex {
  display: flex;
  align-items: center;
}

.mx-1 {
  margin-inline: 0.5rem;
}

.el-button {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 0.64rem;
  letter-spacing: 0.00938em;
}

var Main = {
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    }
  },
  data() {
    return {
      options: [
        {
          value: "#1234",
          label: "Joe Smith"
        },
        {
          value: "#5678",
          label: "Maggie Hoggins"
        },
        {
          value: "#9101",
          label: "Frank Gatts"
        }
      ],
      value: "",
      tableData: [
        {
          id: "#1234",
          name: "Joe Smith"
        },
        {
          id: "#5678",
          name: "Maggie Hoggins"
        },
        {
          id: "#9101",
          name: "Frank Gatts"
        },
        {
          id: "#1213",
          name: "Tom Walter"
        },
        {
          id: "#1415",
          name: "Jackie Lee"
        },
        {
          id: "#1617",
          name: "Burnie Dilbert"
        },
        {
          id: "#1819",
          name: "Brian Park"
        }
      ]
    };
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount("#app");