{% extends "/layouts/main.twig" %}

{% set active_menu = 'settings' %}

{% block title p__('title', 'Settings')|title %}

{% block template %}
<h1>{{ p__('heading', 'Settings') }}</h1>

<div>
  <h2>{{ p__('heading', 'Common') }}</h2>

  <div class="grid gap-2 mt-4 sm:gap-4 md:gap-5 sm:grid-cols-2">
    <a href="admin/settings/general"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-settings-2"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'General') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Website and SEO') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/brand"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-brand-abstract"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Brand') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Branding and logo') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/public-details"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-circles-relation"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Public details') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Address, contacts etc.') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/policies"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-shield-check"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Policies') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Legal terms') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/appearance"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-brush"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Appearance') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Color schemes etc.') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/features"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-sparkles"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Features') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Configure features') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/pwa"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-bolt"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'PWA') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Progressive Web App settings') }}
        </p>
      </div>
    </a>
  </div>
</div>

<div>
  <h2>{{ p__('heading', 'Finance') }}</h2>

  <div class="grid gap-2 mt-4 sm:gap-4 md:gap-5 sm:grid-cols-2">
    <a href="admin/settings/billing"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-file-invoice"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Billing') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Currency and subscriptions') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/payments"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-cash"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Payments') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Payment gateway integrations') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/credits"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-decimal"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Credit ratios') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Credit usage rates') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/rate-providers"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-exchange"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Exchange') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Currency exchange rate providers') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/affiliates"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-affiliate"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Affiliates') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Affiliate program settings') }}
        </p>
      </div>
    </a>
  </div>
</div>

<div>
  <h2>{{ p__('heading', 'Email') }}</h2>

  <div class="grid gap-2 mt-4 sm:gap-4 md:gap-5 sm:grid-cols-2">
    <a href="admin/settings/mail"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-at"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Mail') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Transport and sender details') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/smtp"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-server-cog"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'SMTP') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('SMTP transport details') }}
        </p>
      </div>
    </a>
  </div>
</div>

<div>
  <h2>{{ p__('heading', 'User accounts') }}</h2>

  <div class="grid gap-2 mt-4 sm:gap-4 md:gap-5 sm:grid-cols-2">
    <a href="admin/settings/accounts"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-user-cog"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Account settings') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Accounts and sign up form') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/identity-providers"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-fingerprint"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Identity providers') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('3rd party identiy providers') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/recaptcha"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-scan"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'CAPTCHA') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Google reCAPTCHA') }}
        </p>
      </div>
    </a>
  </div>
</div>

<div>
  <h2>{{ p__('heading', 'File storage') }}</h2>

  <div class="grid gap-2 mt-4 sm:gap-4 md:gap-5 sm:grid-cols-2">
    <a href="admin/settings/storage"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-file-stack"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Storage settings') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('File storage settings') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/cdn"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-cloud-upload"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'CDN') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Integrated cloud storage options') }}
        </p>
      </div>
    </a>
  </div>
</div>

<div>
  <h2>{{ p__('heading', 'Integrations') }}</h2>

  <div class="grid gap-2 mt-4 sm:gap-4 md:gap-5 sm:grid-cols-2">
    <a href="admin/settings/openai"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-brand-openai"></i>
      </span>

      <div>
        <h3>OpenAI</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('API keys and service config') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/cohere"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <svg xmlns="http://www.w3.org/2000/svg" width="218" height="224"
          viewBox="0 0 218 224">
          <path
            d="M70.7878 133.637C76.6687 133.637 88.367 133.305 104.537 126.48C123.38 118.525 160.869 104.085 187.913 89.2536C206.827 78.8799 215.117 65.1597 215.117 46.6833C215.118 21.0401 194.843 0.251953 169.833 0.251953H65.0456C29.1218 0.251953 0 30.111 0 66.9442C0 103.777 27.2666 133.637 70.7878 133.637Z"
            fill="currentColor" />
          <path
            d="M88.5088 179.584C88.5088 161.529 99.1098 145.25 115.374 138.329L148.374 124.287C181.753 110.083 218.493 135.234 218.493 172.29C218.493 200.998 195.791 224.269 167.791 224.261L132.061 224.251C108.006 224.245 88.5088 204.249 88.5088 179.584Z"
            fill="currentColor" />
          <path
            d="M37.4969 142.404H37.4962C16.7876 142.404 0 159.617 0 180.85V185.829C0 207.062 16.7876 224.275 37.4962 224.275H37.4969C58.2055 224.275 74.9932 207.062 74.9932 185.829V180.85C74.9932 159.617 58.2055 142.404 37.4969 142.404Z"
            fill="currentColor" />
        </svg>
      </span>

      <div>
        <h3>Cohere</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('API keys and service config') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/anthropic"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <svg viewBox="0 0 256 176" version="1.1"
          xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
          <g fill="currentColor">
            <path
              d="M147.486878,0 C147.486878,0 217.568251,175.780074 217.568251,175.780074 C217.568251,175.780074 256,175.780074 256,175.780074 C256,175.780074 185.918621,0 185.918621,0 C185.918621,0 147.486878,0 147.486878,0 C147.486878,0 147.486878,0 147.486878,0 Z">
            </path>
            <path
              d="M66.1828124,106.221191 C66.1828124,106.221191 90.1624677,44.4471185 90.1624677,44.4471185 C90.1624677,44.4471185 114.142128,106.221191 114.142128,106.221191 C114.142128,106.221191 66.1828124,106.221191 66.1828124,106.221191 C66.1828124,106.221191 66.1828124,106.221191 66.1828124,106.221191 Z M70.0705318,0 C70.0705318,0 0,175.780074 0,175.780074 C0,175.780074 39.179211,175.780074 39.179211,175.780074 C39.179211,175.780074 53.5097704,138.86606 53.5097704,138.86606 C53.5097704,138.86606 126.817544,138.86606 126.817544,138.86606 C126.817544,138.86606 141.145724,175.780074 141.145724,175.780074 C141.145724,175.780074 180.324935,175.780074 180.324935,175.780074 C180.324935,175.780074 110.254409,0 110.254409,0 C110.254409,0 70.0705318,0 70.0705318,0 C70.0705318,0 70.0705318,0 70.0705318,0 Z">
            </path>
          </g>
        </svg>
      </span>

      <div>
        <h3>Anthropic / Claude AI</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('API keys and service config') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/elevenlabs"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        II
      </span>

      <div>
        <h3>ElevenLabs</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('API keys and service config') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/gcp"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-brand-google"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Google Cloud Platform') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Google credentials for TTS etc.') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/azure"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-brand-azure"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Azure') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Credentials for Azure TTS etc.') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/falai"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path opacity="0.22" d="M14.6154 31.8462H12.4616V34H14.6154V31.8462Z"
            fill="currentColor" />
          <path opacity="0.85"
            d="M18.9224 23.2296H8.15329V25.3834H18.9224V23.2296Z"
            fill="currentColor" />
          <path d="M18.9235 21.0764H10.3083V23.2302H18.9235V21.0764Z"
            fill="currentColor" />
          <path opacity="0.4"
            d="M16.7692 29.6929H12.4616V31.8467H16.7692V29.6929Z"
            fill="currentColor" />
          <path opacity="0.7" d="M18.9229 25.3863H6V27.5401H18.9229V25.3863Z"
            fill="currentColor" />
          <path opacity="0.5" d="M18.923 27.5362H12.4616V29.69H18.923V27.5362Z"
            fill="currentColor" />
          <path opacity="0.22"
            d="M14.6154 16.7698H12.4616V18.9236H14.6154V16.7698Z"
            fill="currentColor" />
          <path opacity="0.85"
            d="M18.9224 8.15327H8.15329V10.3071H18.9224V8.15327Z"
            fill="currentColor" />
          <path d="M18.9235 6H10.3083V8.1538H18.9235V6Z" fill="currentColor" />
          <path opacity="0.4"
            d="M16.7692 14.6131H12.4616V16.7669H16.7692V14.6131Z"
            fill="currentColor" />
          <path opacity="0.7" d="M18.9229 10.3066H6V12.4604H18.9229V10.3066Z"
            fill="currentColor" />
          <path opacity="0.5"
            d="M18.923 12.4598H12.4616V14.6136H18.923V12.4598Z"
            fill="currentColor" />
          <path opacity="0.22" d="M29.6918 31.8462H27.538V34H29.6918V31.8462Z"
            fill="currentColor" />
          <path opacity="0.85"
            d="M33.9988 23.2296H23.2297V25.3834H33.9988V23.2296Z"
            fill="currentColor" />
          <path d="M34 21.0764H25.3847V23.2302H34V21.0764Z"
            fill="currentColor" />
          <path opacity="0.4"
            d="M31.8456 29.6929H27.538V31.8467H31.8456V29.6929Z"
            fill="currentColor" />
          <path opacity="0.7"
            d="M33.9993 25.3863H21.0765V27.5401H33.9993V25.3863Z"
            fill="currentColor" />
          <path opacity="0.5" d="M33.9995 27.5362H27.538V29.69H33.9995V27.5362Z"
            fill="currentColor" />
          <path opacity="0.22"
            d="M29.6918 16.7698H27.538V18.9236H29.6918V16.7698Z"
            fill="currentColor" />
          <path opacity="0.85"
            d="M33.9988 8.15327H23.2297V10.3071H33.9988V8.15327Z"
            fill="currentColor" />
          <path d="M34 6H25.3847V8.1538H34V6Z" fill="currentColor" />
          <path opacity="0.4"
            d="M31.8456 14.6131H27.538V16.7669H31.8456V14.6131Z"
            fill="currentColor" />
          <path opacity="0.7"
            d="M33.9993 10.3066H21.0765V12.4604H33.9993V10.3066Z"
            fill="currentColor" />
          <path opacity="0.5"
            d="M33.9995 12.4598H27.538V14.6136H33.9995V12.4598Z"
            fill="currentColor" />
        </svg>
      </span>

      <div>
        <h3>Fal AI</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('API keys and service config') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/stabilityai"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        S.
      </span>

      <div>
        <h3>Stability AI</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('API keys and service config') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/clipdrop"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        CD
      </span>

      <div>
        <h3>Clipdrop</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('API keys and service config') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/serper"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <svg viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M35.6992 17.5264C37.571 17.5264 39.3369 17.8438 40.9971 18.4785C42.6735 19.1133 44.1383 19.9922 45.3916 21.1152C46.6449 22.2383 47.597 23.5404 48.248 25.0215C48.3945 25.347 48.4678 25.6807 48.4678 26.0225C48.4678 26.6898 48.2236 27.2676 47.7354 27.7559C47.2633 28.2279 46.6937 28.4639 46.0264 28.4639C45.5869 28.4639 45.1475 28.3255 44.708 28.0488C44.2686 27.7559 43.9593 27.4059 43.7803 26.999C43.1618 25.5993 42.1283 24.4844 40.6797 23.6543C39.2474 22.8242 37.5872 22.4092 35.6992 22.4092C34.7715 22.4092 33.7868 22.5231 32.7451 22.751C31.7197 22.9788 30.7513 23.3288 29.8398 23.8008C28.9284 24.2565 28.1878 24.8343 27.6182 25.5342C27.0485 26.234 26.7637 27.0479 26.7637 27.9756C26.7637 28.7243 27.0078 29.3753 27.4961 29.9287C27.9844 30.4658 28.5296 30.889 29.1318 31.1982C30.5479 31.8981 32.1104 32.3864 33.8193 32.6631C35.5446 32.9398 37.2861 33.2083 39.0439 33.4688C40.8018 33.7292 42.4375 34.1849 43.9512 34.8359C44.9115 35.2428 45.8311 35.8044 46.71 36.5205C47.5889 37.2367 48.305 38.1074 48.8584 39.1328C49.4118 40.1582 49.6885 41.3626 49.6885 42.7461C49.6885 44.5365 49.2572 46.1071 48.3945 47.458C47.5319 48.8089 46.4007 49.932 45.001 50.8271C43.6012 51.7223 42.0794 52.3978 40.4355 52.8535C38.8079 53.293 37.2129 53.5127 35.6504 53.5127C33.5345 53.5127 31.5488 53.179 29.6934 52.5117C27.8379 51.8281 26.2184 50.8678 24.835 49.6309C23.4515 48.3776 22.3936 46.9128 21.6611 45.2363C21.5146 44.9108 21.4414 44.5853 21.4414 44.2598C21.4414 43.5924 21.6774 43.0228 22.1494 42.5508C22.6377 42.0625 23.2155 41.8184 23.8828 41.8184C24.3385 41.8184 24.7861 41.9648 25.2256 42.2578C25.665 42.5345 25.9661 42.8844 26.1289 43.3076C26.8451 44.9515 28.0576 46.2536 29.7666 47.2139C31.4756 48.1579 33.4368 48.6299 35.6504 48.6299C37.0339 48.6299 38.4255 48.4264 39.8252 48.0195C41.2249 47.5964 42.3968 46.9535 43.3408 46.0908C44.3011 45.2119 44.7812 44.097 44.7812 42.7461C44.7812 41.8835 44.4883 41.1755 43.9023 40.6221C43.3327 40.0524 42.7061 39.6211 42.0225 39.3281C40.4762 38.6608 38.8242 38.2051 37.0664 37.9609C35.3086 37.7005 33.5589 37.432 31.8174 37.1553C30.0758 36.8623 28.4482 36.3333 26.9346 35.5684C25.6488 34.9173 24.4769 33.9733 23.4189 32.7363C22.3773 31.4831 21.8564 29.8962 21.8564 27.9756C21.8564 26.2829 22.2633 24.7936 23.0771 23.5078C23.9072 22.2057 24.9977 21.1152 26.3486 20.2363C27.7158 19.3411 29.2132 18.6657 30.8408 18.21C32.4684 17.7542 34.0879 17.5264 35.6992 17.5264Z"
            fill="currentColor"></path>
          <circle cx="35" cy="35" r="32" stroke="currentColor" stroke-width="6"
            fill="transparent"></circle>
        </svg>
      </span>

      <div>
        <h3>Serper</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Google search API') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/onesignal"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path fill="currentColor"
            d="M15.972.838C7.585.855.752 7.74.8 16.127a15.201 15.201 0 0 0 13.657 15.035.174.174 0 0 0 .192-.175V16.04h-1.181a.175.175 0 0 1-.175-.175v-2.358a.175.175 0 0 1 .175-.175h3.707a.175.175 0 0 1 .175.175v17.481a.175.175 0 0 0 .192.175A15.201 15.201 0 0 0 15.972.838Zm4.32 26.938a.175.175 0 0 1-.234-.166v-2.495a.262.262 0 0 1 .15-.236 9.79 9.79 0 0 0-4.36-18.63c-5.2.08-9.466 4.273-9.631 9.471a9.802 9.802 0 0 0 5.578 9.159.263.263 0 0 1 .15.236v2.495a.174.174 0 0 1-.15.174.175.175 0 0 1-.083-.008 12.515 12.515 0 0 1-8.204-11.852c.06-6.787 5.606-12.328 12.395-12.378 6.935-.056 12.591 5.57 12.591 12.493 0 5.383-3.42 9.982-8.202 11.737Z">
          </path>
        </svg>
      </span>

      <div>
        <h3>OneSignal</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Push notifications') }}
        </p>
      </div>
    </a>

    <a href="admin/settings/script-tags"
      class="flex gap-4 items-center box hover:border-line">
      <span class="avatar">
        <i class="ti ti-code"></i>
      </span>

      <div>
        <h3>{{ p__('heading', 'Script Tags') }}</h3>
        <p class="mt-1 text-sm text-content-dimmed">
          {{ __('Custom tags, Google Analytics etc.') }}
        </p>
      </div>
    </a>
  </div>
</div>

{% endblock %}