import {html} from 'htm/preact';

import {Setting, SettingProps} from './index.js';

export function UserLabelsSetting(props: SettingProps): TRXComponent {
  return html`
    <${Setting} ...${props}>
      <p class="info">
        Adds a way to create customizable labels to users. Wherever a link to a
        person's profile is available, a <code>[+]</code> will be put next to
        it. Clicking on that will bring up a dialog to add a new label and
        clicking on existing labels will bring up the same dialog to edit them.
        <br />
        Or you can use the dedicated${' '}
        <a href="./user-label-editor.html">User Label Editor</a>
        to add, edit, or remove user labels.
      </p>

      <details>
        <summary>View Customizable Values</summary>
        <ul class="user-label-values">
          <li><b>Username</b>: who to apply the label to.</li>
          <li>
            <b>Priority</b>: determines the order of labels. If multiple labels
            have the same priority they will be sorted alphabetically. In the
            topic listing only the highest priority label will be shown.
          </li>
          <li>
            <b>Color</b>: will set the background color of the label. The
            foreground color is calculated to be black or white depending on the
            brightness of the background color.
            <br />
            Valid values are hex colors or <code>transparent</code>.
            <br />
            Colors based on your current Tildes theme are also available in the
            dropdown menu.
          </li>
          <li>
            <b>Text</b>: the text to go in the label. If left empty the label
            will show as a 12 by 12 pixel square instead.
          </li>
        </ul>
      </details>
    <//>
  `;
}