<h1>{{ translate('Settings') }}</h1>

<div class="flex flex-col md:flex-row gap-2 items-start justify-between">
  <div class="card">
    <div class="card-header">{{ translate('Most common settings') }}</div>
    <div class="card-body flex gap-2">
      <a class="btn btn-square btn-primary-outline" href="settings/theme">
        <span class="icon"><i class="fas fa-palette"></i></span>
        <span class="text">{{ translate('Change theme') }}</span>
      </a>
      <a class="btn btn-square btn-primary-outline" href="settings/users">
        <span class="icon"><i class="fas fa-users"></i></span>
        <span class="text">{{ translate('Manage users') }}</span>
      </a>
      <a class="btn btn-square btn-primary-outline" href="settings/apps">
        <span class="icon"><i class="fas fa-puzzle-piece"></i></span>
        <span class="text">{{ translate('Manage apps') }}</span>
      </a>
    </div>
  </div>
  <div class="card">
    <div class="card-header">{{ translate('Locale') }}</div>
    <div class="card-body">
      <table class="table-default dense">
        <tbody>
          <tr>
            <td>{{ translate('Default currency and timezone') }}</td>
            <td>
              <div class="badge badge-info">{{ hubleto.locale().getCurrencyIsoCode() }} [{{ hubleto.locale().getCurrencySymbol() }}]</div>
              <div class="badge badge-info">{{ hubleto.locale().getTimezone() }}</div>
            </td>
          </tr>
          <tr>
            <td>{{ translate('Date (short / long) and time formats') }}</td>
            <td class="flex gap-2">
              <div class="badge badge-info">{{ hubleto.locale().getDateShortFormat() }}</div>
              <div class="badge badge-info">{{ hubleto.locale().getDateLongFormat() }}</div>
              <div class="badge badge-info">{{ hubleto.locale().getTimeFormat() }}</div>
              <div class="badge badge-info">{{ hubleto.locale().getDatetimeFormat() }}</div>
            </td>
          </tr>
          <tr>
            <td>{{ translate('Decimals and thousands separator') }}</td>
            <td>
              <div class="badge badge-info">{{ hubleto.locale().getDecimalsSeparator() }}</div>
              <div class="badge badge-info">{{ hubleto.locale().getThousandsSeparator() }}</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
  function searchSetting(q) {
    if (q == '') {
      $("#setting-buttons .btn").show();
    } else {
      $("#setting-buttons .btn").hide();
      const regex = new RegExp(q, "i");
      $("#setting-buttons .btn").each(function() {
        if ($(this).find('.text').text().match(regex)) {
          $(this).show();
        }
      });
      {# const found = paragraph.match(regex); #}
    }
  }
</script>

<div class="card mt-2">
  <div class="card-header">{{ translate('All settings') }}</div>
  <div class="card-body">
    <input
      class="w-full p-2 border border-gray text-lg"
      placeholder="{{ translate('Search settings...') }}"
      onkeyup="searchSetting(this.value);"
    />

    <div id="setting-buttons" class="mt-4 flex flex-wrap gap-2">
      {% for setting in viewParams.settings %}
        <a class="btn btn-transparent w-60" href="{{ setting.url }}">
          <span class="icon"><i class="{{ setting.icon }}"></i></span>
          <span class="text">{{ setting.title }}</span>
        </a>
      {% endfor %}
    </div>
  </div>
</div>

<div class="mt-8 text-right">
  <a href="{{ config.projectUrl }}/?sign-out" class="btn btn-transparent">
    <span class="icon"><i class="fas fa-sign-out"></i></span>
    <span class="text">{{ translate("Sign out from Hubleto") }}</span>
  </a>
</div>