// Vitest Snapshot v1

exports[`Settings component > should display 1`] = `
<DocumentFragment>
  <div
    class="_styles_23b490"
  >
    <section>
      <h4>
        New message notification
      </h4>
      <form>
        <div
          class="form-check"
        >
          <label
            class="form-check-label"
            for="sound-control"
          >
            <input
              checked=""
              class="form-check-input"
              id="sound-control"
              type="checkbox"
            />
            Sound
          </label>
        </div>
        <div
          class="form-check"
        >
          <label
            class="form-check-label"
            for="notif-control"
          >
            <input
              checked=""
              class="form-check-input"
              id="notif-control"
              type="checkbox"
            />
            Desktop Notification
          </label>
        </div>
      </form>
    </section>
    <section>
      <h4
        class="mb-3"
      >
        This room
      </h4>
    </section>
    <section>
      <h4
        class="mb-3"
      >
        Language
      </h4>
      <p>
        <a
          href="https://github.com/darkwire/darkwire.io/blob/master/client/README.md#translations"
          rel="noopener noreferrer"
          target="_blank"
        >
          Help us translate Darkwire!
        </a>
      </p>
      <div
        class="form-group"
      >
        <select
          class="form-control"
        >
          <option
            value="en"
          >
            English
          </option>
          <option
            value="fr"
          >
            Français
          </option>
          <option
            value="oc"
          >
            Occitan
          </option>
          <option
            value="de"
          >
            Deutsch
          </option>
          <option
            value="esAR"
          >
            Español (Argentina)
          </option>
          <option
            value="nl"
          >
            Nederlands
          </option>
          <option
            value="it"
          >
            Italiano
          </option>
          <option
            value="ru"
          >
            Русский
          </option>
          <option
            value="zhCN"
          >
            中文
          </option>
          <option
            value="ja"
          >
            日本語
          </option>
          <option
            value="tr"
          >
            Türkçe
          </option>
          <option
            value="ko"
          >
            한국어
          </option>
        </select>
      </div>
    </section>
    <section>
      <h4>
        Room Ownership
      </h4>
      <p>
        The person who created the room is the room owner and has special privileges, like the ability to lock and unlock the room. If the owner leaves the room, the second person to join assumes ownership. If they leave, the third person becomes owner, and so on. The room owner has a star icon next to their username in the participants dropdown.
      </p>
    </section>
    <section>
      <h4>
        Lock Room
      </h4>
      <p>
        If you are the room owner, you can lock and unlock the room by clicking the lock icon in the nav bar. When a room is locked, no other participants will be able to join.
      </p>
    </section>
    <section>
      <h4>
        Slash Commands
      </h4>
      <p>
        The following slash commands are available:
      </p>
      <ul>
        <li>
          /nick [username] 
          <span
            class="text-muted"
          >
            changes username
          </span>
        </li>
        <li>
          /me [action] 
          <span
            class="text-muted"
          >
            performs an action
          </span>
        </li>
        <li>
          /clear 
          <span
            class="text-muted"
          >
            clears your message history
          </span>
        </li>
        <li>
          /help 
          <span
            class="text-muted"
          >
            lists all commands
          </span>
        </li>
      </ul>
    </section>
  </div>
</DocumentFragment>
`;

exports[`Settings component > should display 2`] = `
<DocumentFragment>
  <div
    class="_styles_23b490"
  >
    <section>
      <h4>
        New message notification
      </h4>
      <form>
        <div
          class="form-check"
        >
          <label
            class="form-check-label"
            for="sound-control"
          >
            <input
              checked=""
              class="form-check-input"
              id="sound-control"
              type="checkbox"
            />
            Sound
          </label>
        </div>
        <div
          class="form-check"
        >
          <label
            class="form-check-label"
            for="notif-control"
          >
            Desktop notifications have been denied
          </label>
        </div>
      </form>
    </section>
    <section>
      <h4
        class="mb-3"
      >
        This room
      </h4>
    </section>
    <section>
      <h4
        class="mb-3"
      >
        Language
      </h4>
      <p>
        <a
          href="https://github.com/darkwire/darkwire.io/blob/master/client/README.md#translations"
          rel="noopener noreferrer"
          target="_blank"
        >
          Help us translate Darkwire!
        </a>
      </p>
      <div
        class="form-group"
      >
        <select
          class="form-control"
        >
          <option
            value="en"
          >
            English
          </option>
          <option
            value="fr"
          >
            Français
          </option>
          <option
            value="oc"
          >
            Occitan
          </option>
          <option
            value="de"
          >
            Deutsch
          </option>
          <option
            value="esAR"
          >
            Español (Argentina)
          </option>
          <option
            value="nl"
          >
            Nederlands
          </option>
          <option
            value="it"
          >
            Italiano
          </option>
          <option
            value="ru"
          >
            Русский
          </option>
          <option
            value="zhCN"
          >
            中文
          </option>
          <option
            value="ja"
          >
            日本語
          </option>
          <option
            value="tr"
          >
            Türkçe
          </option>
          <option
            value="ko"
          >
            한국어
          </option>
        </select>
      </div>
    </section>
    <section>
      <h4>
        Room Ownership
      </h4>
      <p>
        The person who created the room is the room owner and has special privileges, like the ability to lock and unlock the room. If the owner leaves the room, the second person to join assumes ownership. If they leave, the third person becomes owner, and so on. The room owner has a star icon next to their username in the participants dropdown.
      </p>
    </section>
    <section>
      <h4>
        Lock Room
      </h4>
      <p>
        If you are the room owner, you can lock and unlock the room by clicking the lock icon in the nav bar. When a room is locked, no other participants will be able to join.
      </p>
    </section>
    <section>
      <h4>
        Slash Commands
      </h4>
      <p>
        The following slash commands are available:
      </p>
      <ul>
        <li>
          /nick [username] 
          <span
            class="text-muted"
          >
            changes username
          </span>
        </li>
        <li>
          /me [action] 
          <span
            class="text-muted"
          >
            performs an action
          </span>
        </li>
        <li>
          /clear 
          <span
            class="text-muted"
          >
            clears your message history
          </span>
        </li>
        <li>
          /help 
          <span
            class="text-muted"
          >
            lists all commands
          </span>
        </li>
      </ul>
    </section>
  </div>
</DocumentFragment>
`;