{% set isPremium = hubleto.env().isPremium() %}

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

<div class="flex gap-2">
  <div class="alert alert-info">{{ translate('Installed apps') }}: {{ viewParams.installedApps|length }}</div>
  <div class="alert alert-info">{{ translate('Available apps') }}: {{ viewParams.availableApps|length }}</div>
</div>

<div class="card">
  <div class="card-header">{{ translate('Apps') }}</div>
  <div class="card-body">
    <form action="" method="get">
      <input
        name="findApp"
        class="w-full p-2 border border-gray text-lg {{ viewParams.findApp == "" ? "" : "bg-yellow-100 border-yellow-300" }}"
        placeholder="{{ translate('(Search) Type app name and press Enter...') }}"
        value="{{ viewParams.findApp }}"
      />
    </form>

    <div class="list mt-2">
      {% for appNamespace, app in viewParams.appsToShow %}
        <div class="item flex gap-2 items-center p-2 justify-between">
          <div>
            <i class="{{ app.manifest.icon }}"></i>
          </div>
          <div>
            {% if app.type == 'community' %} <div class="badge badge-violet">{{ translate('Community') }}</div> {% endif %}
            {% if app.type == 'enterprise' %} <div class="badge badge-lime">{{ translate('Enterprise') }}</div> {% endif %}
            {% if app.type == 'external' %} <div class="badge badge-yellow">{{ translate('External') }}</div> {% endif %}
            {% if app.type == 'custom' %} <div class="badge badge-green">{{ translate('Custom') }}</div> {% endif %}
          </div>
          <div class="grow">
            <div class="font-normal text-xs text-gray-400">{{ app.manifest.namespace }}</div>
            <b>{{ app.manifest.nameTranslated ?? app.manifest.name }}</b>
            {{ app.manifest.highlightTranslated ?? app.manifest.highlight }}
          </div>
          <div>
            {% if app.instance %}
              <a class="btn btn-blue" href="../{{ app.manifest.rootUrlSlug }}">
                <span class="icon"><i class="fas fa-arrow-right"></i></span>
                <span class="text">{{ translate('Go to app') }}</span>
              </a>
              {% if app.instance.enabled %}
                {% if app.instance.canBeDisabled %}
                  <a class="btn btn-red-outline" href="?disableApp={{ appNamespace }}">
                    <span class="icon"><i class="fas fa-trash-can"></i></span>
                    <span class="text">{{ translate('Disable') }}</span>
                  </a>
                {% endif %}
              {% else %}
                <a class="btn btn-success" href="?enableApp={{ appNamespace }}">
                  <span class="icon"><i class="fas fa-check"></i></span>
                  <span class="text">{{ translate('Enable') }}</span>
                </a>
              {% endif %}
            {% else %}
              {% if app.type == 1 or isPremium %}
                <a class="btn btn-add" href="?installApp={{ appNamespace }}">
                  <span class="icon"><i class="fas fa-add"></i></span>
                  <span class="text">{{ translate('Install') }}</span>
                </a>
              {% elseif not isPremium %}
                <div class="badge badge-warning">{{ translate('You can install Premium apps only in Premium account.') }}</div>
                <a class="btn btn-add" href="{{ config.projectUrl }}/cloud">
                  <span class="icon"><i class="fas fa-medal"></i></span>
                  <span class="text">{{ translate('Activate Premium account') }}</span>
                </a>
              {% endif %}
            {% endif %}
            {# <a class="btn btn-red" href="{{ app.url }}">
              <span class="text">{{ translate('Uninstall') }}</span>
            </a> #}
          </div>
        </div>
      {% endfor %}
    </div>

    {# <a class="btn btn-transparent mt-2" href="{{ config.projectUrl }}/settings/update-default-permissions">
      <span class="icon"><i class="fas fa-refresh"></i></span>
      <span class="text">Update default permissions</span>
    </a> #}
  </div>
</div>