<h1 class="app-main-title">{{ translate('Help') }}</h1>

<div class="flex gap-2">
  <div class="flex flex-col gap-2">
    <div class="card">
      <div class="card-header">{{ translate('Need help using Hubleto?') }}</div>
      <div class="card-body">
        <a class="btn btn-primary-outline btn-square btn-large w-full" target="_blank" href="https://help.hubleto.eu">
          <span class="icon"><i class="fas fa-arrow-up-right-from-square"></i></span>
          <span class="text">https://help.hubleto.eu</span>
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">{{ translate('Found a bug?') }}</div>
      <div class="card-body">
        <a class="btn btn-primary-outline btn-square btn-large w-full" target="_blank" href="https://github.com/hubleto/erp/issues">
          <span class="icon"><i class="fas fa-arrow-up-right-from-square"></i></span>
          <span class="text">https://github.com/hubleto/erp/issues</span>
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">{{ translate('Need help with development?') }}</div>
      <div class="card-body">
        <a class="btn btn-primary-outline btn-square btn-large w-full" target="_blank" href="https://developer.hubleto.eu">
          <span class="icon"><i class="fas fa-arrow-up-right-from-square"></i></span>
          <span class="text">https://developer.hubleto.eu</span>
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-header">{{ translate('Just looking around?') }}</div>
      <div class="card-body">
        <a class="btn btn-primary-outline btn-square btn-large w-full" target="_blank" href="https://www.hubleto.eu">
          <span class="icon"><i class="fas fa-arrow-up-right-from-square"></i></span>
          <span class="text">https://www.hubleto.eu</span>
        </a>
      </div>
    </div>
  </div>
</div>
