<!DOCTYPE html>
<html>

<head>
  <script src="main.js"></script>
  <script src="icon.js"></script>
  <script src="login.js"></script>
  <style>
    :root {
      --ulliColor: #272727d5;
      --ulliColorHover: #656464b9;
      --colorLine: #3b3b3b;
      --textForLight: #fff;
      --textUser: #a2a2a2;
    }

    @media (prefers-color-scheme: lightest),
    (prefers-color-scheme: light) {
      :root {
        --ulliColor: #e1e0e0;
        --ulliColorHover: #bbbaba;
        --colorLine: #f1f0f0;
        --textForLight: #000;
        --textUser: #8a8a8a;

      }
    }

    body {
      color: var(--uxp-host-text-color);
      padding: 0 16px;
      font-size: var(--uxp-host-font-size);
    }

    .ulli {
      color: var(--textForLight);
      font-size: 9px;
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      height: 23px;
      justify-content: flex-start;
      line-height: 0px;
      border-radius: 0px;
      margin-left: 0px;
      font-size: var(--uxp-host-font-size);
      padding: 1.5px;
      margin-bottom: 1px;
      /* border-bottom: 1px solid var(--colorLine); */
      background-color: var(--ulliColor);
    }

    .ulliIcon {
      width: 15px;
      display: none;
      position: absolute;
      top: 50%;
      right: 5px;
      fill: var(--uxp-host-border-color);
      transform: translateY(-50%);
    }

    .ulli:hover {
      background-color: var(--ulliColorHover);

    }

    .ulli:hover .ulliIcon {
      display: inline;
    }

    .ulliIcon:hover {
      fill: currentColor;

    }

    .ulliIconFill {
      fill: currentColor;
    }

    .version {
      position: absolute;
      color: var(--textUser);
      font-size: var(--uxp-host-font-size);
      font-weight: 500;
      left: 16px;
      top: 50%;
      /* bottom: 50%; */
      transform: translateY(-50%);
    }

    #actions-list {
      overflow-y: auto;
      background: var(--uxp-host-widget-hover-background-color);
      max-height: calc(100vh - 160px);
    }

    .icon-refresh {
      position: absolute;
      top: 50%;
      right: 7px;
      transform: translateY(-50%);
    }

    #actionSet-picker {
      width: 70%;
      margin-right: 2%;
    }

    .sort-btn {
      width: 13%;
      margin-right: 2%;
    }

    .favourite-btn {
      width: 13%;
    }

    .btn-group {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      height: 15%;
      padding-top: 15px;
      padding-bottom: 5px;
      justify-items: center;
    }

    .user-erea {
      position: absolute;
      height: 25px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      /* background: aliceblue; */
      border-top: 1px solid var(--uxp-host-border-color);
    }

    .refresh-btn {
      position: absolute;
      top: 50%;
      bottom: 50%;
      right: 7px;
      transform: translateY(-50%);
    }

    .color-btn {
      display: flex;
      justify-content: space-between;
      padding-bottom: 7px;
    }

    .icon-color {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .color-click {
      background: #080808;
    }
    .hidden {
      display: none !important;
    }
  </style>
</head>

<body>
  <!-- Select ActionSets, filter -->
  <div class="btn-group">
    <sp-picker id="actionSet-picker" placeholder="Select Action Set">
      <sp-menu slot="options"></sp-menu>
    </sp-picker>
    <sp-action-button class="sort-btn">
      <div slot="icon" class="icon-sort" style="fill:currentColor">
        <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
          <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" />
          <rect class="fill" height="2" rx="0.5" width="6" x="1" y="12" />
          <rect class="fill" height="2" rx="0.5" width="8" x="1" y="8" />
          <rect class="fill" height="2" rx="0.5" width="10" x="1" y="4" />
          <path
            d="M16,12H14.9965V4.5a.494.494,0,0,0-.488-.5L14.503,4h-.496a.5.5,0,0,0-.5.5L13.5035,12H12.5a.25.25,0,0,0-.25.25.245.245,0,0,0,.0735.175l1.7685,2.0165a.25.25,0,0,0,.316,0l1.7685-2.0165a.245.245,0,0,0,.0735-.175A.25.25,0,0,0,16,12Z" />
        </svg>
      </div>
    </sp-action-button>
    <sp-action-button class="favourite-btn">
      <sp-icon name="ui:Star" size="m" slot="icon"></sp-icon>
    </sp-action-button>
  </div>
  <!-- search actions -->
  <sp-textfield id="search-actions" type="search" onfocus placeholder="Search Actions"
    style="width: 100%; padding-bottom: 5px;">
  </sp-textfield>
  <div class="color-btn">
    <sp-action-button class="red-btn" style="width: 17%;">
      <div slot="icon" class="icon-color" style="fill: #922a18;">
      </div>
    </sp-action-button>
    <sp-action-button class="orange-btn" style="width: 17%;">
      <div slot="icon" class="icon-color" style="fill: #925b13;">
      </div>
    </sp-action-button>
    <sp-action-button class="yellow-btn" style="width: 17%;">
      <div slot="icon" class="icon-color" style="fill: #a37e18;">
      </div>
    </sp-action-button>
    <sp-action-button class="green-btn" style="width: 17%;">
      <div slot="icon" class="icon-color" style="fill: #667520;">
      </div>
    </sp-action-button>
    <sp-action-button class="blue-btn" style="width: 17%;">
      <div slot="icon" class="icon-color" style="fill: #2d549b;">
      </div>
    </sp-action-button>
    <sp-action-button class="violet-btn" style="width: 17%;">
      <div slot="icon" class="icon-color" style="fill: #595099;">
      </div>
    </sp-action-button>
  </div>
  <!-- Danh sách actions của mỗi actionSet -->
  <div id="actions-list" class="hidden"></div>
  <div class="nologin" style="background:var(--ulliColor); padding: 16px; padding-bottom: 30px;">
    <div class="login" style="width: 100%;">
      <sp-textfield id="username" style="width: 100%;" type="username" placeholder="Enter UserName">
        <sp-label isrequired="true" slot="label">UserName:</sp-label>
      </sp-textfield>
      <sp-textfield id="password" style="width: 100%;" type="password" placeholder="Enter Pasword">
        <sp-label isrequired="true" slot="label">Pasword:</sp-label>
      </sp-textfield>
    </div>
    <div class="enter-login" style="width: 100%; margin-top: 10px; display: flex; justify-content: center;">
      <sp-action-button class="login-btn">
        <div slot="icon" class="icon-login" style="fill:currentColor">
          <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
            <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" />
            <path
              d="M5.8,15.0885A3.95,3.95,0,0,1,9.7455,11.144a3.78664,3.78664,0,0,1,.9755.1275l.45-.45c0-.016-.0085-.031-.0085-.05V9.661a.77.77,0,0,1,.196-.4965A5.873,5.873,0,0,0,12.694,5.5c0-2.7735-1.4705-4.323-3.6935-4.323S5.2655,2.7875,5.2655,5.5a5.93651,5.93651,0,0,0,1.4,3.665.77.77,0,0,1,.196.4965v1.107a.764.764,0,0,1-.6665.771c-4.4655.3885-5.163,3.443-5.163,4.65,0,.134.0155.6605.0255.792h5.246A3.89259,3.89259,0,0,1,5.8,15.0885Z" />
            <path
              d="M17.8325,10.446l-1.971-1.971a.45751.45751,0,0,0-.647,0L11.018,12.6715a2.714,2.714,0,0,0-1.2735-.327A2.7445,2.7445,0,1,0,12.489,15.089a2.71592,2.71592,0,0,0-.32-1.2605l2.05-2.05,1.1405,1.1405a.2285.2285,0,0,0,.32315.00035L15.683,12.919l1.02-1.02-1.3-1.3.3755-.3755,1.3,1.3.753-.753a.2285.2285,0,0,0,.00235-.32314ZM9.45,16.3a.915.915,0,1,1,.915-.915A.915.915,0,0,1,9.45,16.3Z" />
          </svg>
        </div>
        Login
      </sp-action-button>
    </div>
  </div>
  <!-- Reset, account -->
  <div class="user-erea">
    <sp-action-button quiet class="refresh-btn">
      <div slot="icon" class="icon-refresh" style="fill:currentColor">
        <svg xmlns="http://www.w3.org/2000/svg" height="15" viewBox="0 0 18 18" width="15">
          <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" />
          <path
            d="M16.337,10H15.39a.6075.6075,0,0,0-.581.469A5.7235,5.7235,0,0,1,5.25,13.006l-.346-.3465L6.8815,10.682A.392.392,0,0,0,7,10.4a.4.4,0,0,0-.377-.4H1.25a.25.25,0,0,0-.25.25v5.375A.4.4,0,0,0,1.4,16a.3905.3905,0,0,0,.28-.118l1.8085-1.8085.178.1785a8.09048,8.09048,0,0,0,3.642,2.1655,7.715,7.715,0,0,0,9.4379-5.47434q.04733-.178.0861-.35816A.5.5,0,0,0,16.337,10Z" />
          <path
            d="M16.6,2a.3905.3905,0,0,0-.28.118L14.5095,3.9265l-.178-.1765a8.09048,8.09048,0,0,0-3.642-2.1655A7.715,7.715,0,0,0,1.25269,7.06072q-.04677.17612-.08519.35428A.5.5,0,0,0,1.663,8H2.61a.6075.6075,0,0,0,.581-.469A5.7235,5.7235,0,0,1,12.75,4.994l.346.3465L11.1185,7.318A.392.392,0,0,0,11,7.6a.4.4,0,0,0,.377.4H16.75A.25.25,0,0,0,17,7.75V2.377A.4.4,0,0,0,16.6,2Z" />
        </svg>
      </div>
    </sp-action-button>
    <p class="version">1.0.1</p>
  </div>
</body>

</html>