<section class="header clearfix">
  <h1>{{t 'helpPage.header'}}</h1>
</section>

{{#if (and settings.isRancher latestAnnouncement (not modelError))}}
  <div class="banner bg-info">
    <div class="banner-icon p-20"><i class="icon icon-info"></i></div>
    <div class="banner-message p-20">
      {{#if modelResolved}}
        {{t 'helpPage.banner' released=(format-relative latestAnnouncement.created interval=C.LANGUAGE.FORMAT_RELATIVE_TIMEOUT)}}
        <a href="{{latestAnnouncement.link}}" target="_blank">{{latestAnnouncement.title}}</a>
      {{else}}
        <i class="icon icon-spinner icon-spin"></i> {{t 'generic.loading'}}
      {{/if}}
    </div>
  </div>
{{/if}}

<section>
  <div class="row">
    <div class="col span-4">
        <h3>{{t 'helpPage.environment.header'}}</h3>
        <hr/>
        {{t 'helpPage.environment.content' appName=settings.appName htmlSafe=true}}
        {{#link-to 'global-admin.clusters' class="btn bg-primary right-divider-btn"}} {{t 'helpPage.environment.manageLink'}} {{/link-to}}
    </div>

    <div class="col span-4">
        <h3>{{t 'helpPage.host.header'}}</h3>
        <hr/>
        <p>{{t 'helpPage.host.content' appName=settings.appName minVersion=settings.minDockerVersion}} <a href="{{docsLink}}/hosts/" target="_blank">{{t 'helpPage.host.contentLink'}}</a></p>
        {{#link-to "authenticated.host-templates" class="btn bg-primary"}}{{t 'helpPage.host.addHostLink'}}{{/link-to}}
    </div>

    <div class="col span-4">
        <h3>{{t 'helpPage.stacks.header'}}</h3>
        <hr/>
        <p>{{t 'helpPage.stacks.content.paragraph1' appName=settings.appName}}</p>

        <p>{{t 'helpPage.stacks.content.paragraph2' appName=settings.appName}} <a href="{{docsLink}}/cattle/adding-services/" target="_blank">{{t 'helpPage.stacks.content.link'}}</a></p>
        {{#if hasHosts}}
            {{#link-to "authenticated.project" class="btn bg-primary"}} {{t 'helpPage.stacks.addServiceLink'}}{{/link-to}}
            {{#link-to "catalog-tab" class="btn bg-primary"}} {{t 'helpPage.stacks.addCatalogLink'}}{{/link-to}}
          {{else}}
            <div class="banner bg-warning p-20">
            <p>{{t 'helpPage.stacks.noHosts'}}</p>
            {{#link-to "authenticated.project" class="btn bg-primary mr-10" disabled=true}}{{t 'helpPage.stacks.manageServiceLink'}}{{/link-to}}
            {{#link-to "catalog-tab" class="btn bg-primary" disabled=true}}{{t 'helpPage.stacks.addCatalogLink'}}{{/link-to}}
            </div>
        {{/if}}
    </div>
  </div>
</section>

{{#if settings.isRancher}}
  <section class="box">
    <h3>{{t 'helpPage.issues.header.text'}}</h3>


    <hr/>

    <div class="row">
      <p>{{t 'helpPage.issues.content.paragraph1' appName=settings.appName}}</p>
    </div>

    <div class="row">
      <div class="col span-4 text-center">
        <a href="{{settings.issueUrl}}" target="_blank"><img src="{{app.baseAssets}}assets/images/help-bug.svg" width="50%" /></a>
        <p>
          {{t 'helpPage.issues.content.graphic1.text'}}
          <br/>
          <a href="{{settings.issueUrl}}" target="_blank">{{t 'helpPage.issues.content.graphic1.link'}}</a>
        </p>
      </div>

      <div class="col span-4 text-center">
        <a href="{{companyLink}}/learn/" target="_blank"><img src="{{app.baseAssets}}assets/images/help-docs.svg" width="50%" /></a>
        <p>
          {{t 'helpPage.issues.content.graphic2.text'}}
          <br/>
          {{t 'helpPage.issues.content.graphic2.link'
            appName=settings.appName
            companyLink=companyLink
            docsLink=docsLink
            htmlSafe=true
            }}
        </p>
      </div>

      <div class="col span-4 text-center">
        <a href="{{docsLink}}/faqs/" target="_blank"><img src="{{app.baseAssets}}assets/images/help-troubleshoot.svg" width="50%" /></a>
        <p>
          {{t 'helpPage.issues.content.graphic3.text'}}
          <br/><a href="{{docsLink}}/faqs/" target="_blank">{{t 'helpPage.issues.content.graphic3.link'}}</a>
        </p>
      </div>
    </div>
    <div class="banner bg-info p-10 mb-0 text-center">
        {{t 'helpPage.issues.header.tagline'}} <a href="{{settings.issueUrl}}" class="btn bg-primary ml-10" target="_blank">{{t 'helpPage.issues.header.fileBug'}}</a>
      </div>
  </section>

  <section class="box mt-30">
  <h3>{{t 'helpPage.forums.header'}}</h3>
  <hr/>
  {{#if modelResolved}}
    {{#unless modelError}}
      <div class="row mb-30">
        <div class="col span-3">
          <h4>{{t 'helpPage.forums.announcements.header'}}</h4>
          <ul class="list-unstyled">
            {{#each model.announcements.topics as |topic|}}
              <li class="clip pb-5">
                <a href="{{forumsLink}}/t/{{topic.slug}}" target="_blank">{{topic.title}}</a>
              </li>
            {{/each}}
          </ul>
          <a class="btn btn-sm bg-primary mt-10" href="{{forumsLink}}/c/announcements" target="blank">{{t 'helpPage.forums.announcements.buttonText'}}</a>
          </div>
          <div class="col span-3">
          <h4>{{t 'helpPage.forums.general.header'}}</h4>
          <ul class="list-unstyled">
            {{#each model.general.topics as |topic|}}
              <li class="clip pb-5">
                <a href="{{forumsLink}}/t/{{topic.slug}}" target="_blank">{{topic.title}}</a>
              </li>
            {{/each}}
          </ul>
          <a class="btn btn-sm bg-primary mt-10" href="{{forumsLink}}/c/general" target="blank">{{t 'helpPage.forums.general.buttonText'}}</a>

        </div>
        <div class="col span-3">
          <h4>{{t 'helpPage.forums.rancher.header'}}</h4>
          <ul class="list-unstyled">
            {{#each model.rancher.topics as |topic|}}
              <li class="clip pb-5">
                <a href="{{forumsLink}}/t/{{topic.slug}}" target="_blank">{{topic.title}}</a>
              </li>
            {{/each}}
          </ul>
          <a class="btn btn-sm bg-primary mt-10" href="{{forumsLink}}/c/rancher" target="blank">{{t 'helpPage.forums.rancher.buttonText'}}</a>
          </div>
          <div class="col span-3">
          <h4>{{t 'helpPage.forums.rancherOs.header'}}</h4>
          <ul class="list-unstyled">
            {{#each model.rancherOS.topics as |topic|}}
              <li class="clip pb-5">
                <a href="{{forumsLink}}/t/{{topic.slug}}" target="_blank">{{topic.title}}</a>
              </li>
            {{/each}}
          </ul>
          <a class="btn btn-sm bg-primary mt-10" href="{{forumsLink}}/c/rancher-os" target="blank">{{t 'helpPage.forums.rancherOs.buttonText'}}</a>
        </div>
      </div>
    {{else}}
      <div class="text-center">Looks like you're offline. Please go online to see content from the forums.</div>
    {{/unless}}
  {{else}}
    <div class="loading text-center"></div>
  {{/if}}
  <div class="banner bg-info p-10 mb-0 text-center">
    {{t 'helpPage.forums.tagline'}} <a href="{{forumsLink}}" class="btn bg-primary ml-10" target="_blank">{{t 'helpPage.forums.buttonText'}}</a>
  </div>
  </section>

  <section class="box mt-30">
    <h3>{{t 'helpPage.commercial.header'}}</h3>
    <hr/>
    <p>
      {{t 'helpPage.commercial.content'
        appName=settings.appName
        htmlSafe=true
        }}
    </p>
  </section>
{{/if}}
