Modal

  <wc-button id="open-modal-button">
    Open Modal
  </wc-button>

  <pc-modal id="sample-modal" size="xs" heading="Create User" subheading="User management">

    <pc-modal-content type="text">
      <p class="text-body">
        Modal labels and headings should be set in sentence case. Keep all labels and headings concise and to the point.
        Modal labels are optional.
        <wc-icon size="sm" tooltip-target="save-tooltip-scroll" color="secondary" variant="ghost" name="warning"></wc-icon>
        <pc-tooltip id="save-tooltip-scroll" placements="bottom,top">Save the record</pc-tooltip>
      </p>
    </pc-modal-content>

    <pc-modal-content>
      <pc-input type="text" class="form-field" layer="01" label="Name" id="name" required="true"></pc-input>

      <goat-select label="Gender" id="gender" class="form-field" layer="01" placeholder="Select" clearable="true"></goat-select>

      <goat-checkbox layer="01">Do you like Ice cream?</goat-checkbox>

    </pc-modal-content>

    <div slot="footer">
      <div class="modal-footer">
        <wc-button class="footer-button cancel-button" variant="tonal" color="secondary" size="lg">Cancel
        </wc-button>
        <wc-button id="save-button" class="footer-button" size="lg">Save
        </wc-button>
      </div>
    </div>


  </pc-modal>

  <style>
    .modal-footer {
      display: flex;
    }

    .footer-button {
      --filled-button-container-shape: var(--shape-corner-none);
      --tonal-button-container-shape: var(--shape-corner-none);
      flex: 1;
    }
  </style>

  <script>
    const modalButton = document.querySelector('#open-modal-button');
    const modal = document.querySelector('#sample-modal');
    const saveButton = document.querySelector('#save-button');
    const cancelButtons = document.querySelectorAll('.cancel-button');
    const nameElm = document.querySelector('#name');
    const genderElm = document.querySelector('#gender');

    genderElm.items = [
      { label: 'Male', value: 'Male' },
      { label: 'Female', value: 'Female' },
      { label: 'Other', value: 'Other' },
    ];

    function resetForm() {
      modal.showLoader = false;
      saveButton.showLoader = false;
      saveButton.disable = false;
      saveButton.color = 'primary';
      cancelButtons.forEach((cancelButton) => {
        cancelButton.disabled = false;
      });
      nameElm.value = '';
      genderElm.value = '';
    }


    modalButton.addEventListener('click', () => {
      modal.open = true;
      setTimeout(() => {
        nameElm.setFocus();
      }, 80);
    });

    saveButton.addEventListener('click', () => {
      modal.showLoader = true;
      saveButton.showLoader = true;
      saveButton.color = 'secondary';
      cancelButtons.forEach((cancelButton) => {
        cancelButton.disabled = true;
      });
      // Mock save
      setTimeout(() => {
        modal.open = false;
        resetForm();
      }, 1000);
    });

    modal.addEventListener('pc-modal--close', () => {
      modal.open = false;
      resetForm();
    });

    cancelButtons.forEach((cancelButton) => {
      cancelButton.addEventListener('click', () => {
        modal.open = false;
      });
    });

  </script>