<div class="flex">
  <h1 class="app-main-title">{{ translate('Deals') }} > {{ translate('Settings') }}</h1>
  {% if viewParams.settingsSaved %}
    <div class="badge badge-info text-sm ml-4">{{ translate('Settings saved.') }}</div>
  {% endif %}
</div>

<script>
  function saveSettings() {
    $("#settings-form").submit();
  }
</script>

<div class="card mt-10 w-1/2 m-auto">
  <form id="settings-form" action="" method="POST">
    <input type="hidden" name="settingsChanged" value="1">
    <table class="table-default">
      <tbody>
        <tr>
          <td>{{ translate("Calendar color") }}</td>
          <td>
            <input
              type="text" name="calendarColor"
              class="hubleto component input"
              value="{{ viewParams.app.configAsString('calendarColor') }}"
              onchange="saveSettings();"
              style="border-left: 2em solid {{ viewParams.app.configAsString('calendarColor') }}"
            />
          </td>
        </tr>
        <tr>
          <td>{{ translate('Deals Prefix') }}</td>
          <td>
            <input
              type="text" name="dealPrefix"
              class="hubleto component input"
              value="{{ viewParams.app.configAsString('dealPrefix') }}"
              onchange="saveSettings();"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</div>