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

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

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

    <goat-modal-content>
      <goat-input type="text" class="form-field" layer="01" label="Name" id="name" required></goat-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>

    </goat-modal-content>

    <div slot="footer">
      <div class="modal-footer">
        <goat-button class="footer-button cancel-button" color="secondary" size="xl">Cancel
        </goat-button>
        <goat-button id="save-button" class="footer-button" size="xl">Save
        </goat-button>
      </div>
    </div>


  </goat-modal>

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

    .footer-button {
      --goat-button-border-radius: 0;
      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('goat-modal--close', () => {
      modal.open = false;
      resetForm();
    });

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

  </script>