<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">

<head>
  <!-- TEMPLATE_HEADER - Used by Every UI Page -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sunshine</title>
<link rel="icon" type="image/x-icon" href="./images/sunshine.ico">

<link href="./assets/css/sunshine.css" rel="stylesheet" />

  <script type="module" crossorigin src="./assets/index-DELUhUB3.js"></script>
  <link rel="modulepreload" crossorigin href="./assets/createLucideIcon-mjjtyxlm.js">
  <link rel="modulepreload" crossorigin href="./assets/Notification-CBHXi2s1.js">
  <link rel="modulepreload" crossorigin href="./assets/Navbar-BpjUb_C-.js">
  <link rel="modulepreload" crossorigin href="./assets/SimpleIcon-BGMhT-IK.js">
  <link rel="modulepreload" crossorigin href="./assets/file-text-DLPhJfqV.js">
  <link rel="modulepreload" crossorigin href="./assets/ResourceCard-sYRiCI4P.js">
  <link rel="modulepreload" crossorigin href="./assets/download-30STmUeh.js">
  <link rel="stylesheet" crossorigin href="./assets/createLucideIcon-BL5QWnkG.css">
  <link rel="stylesheet" crossorigin href="./assets/Notification-HRffB8HQ.css">
  <link rel="stylesheet" crossorigin href="./assets/Navbar-vHSgVmbh.css">
</head>

<body id="app" v-cloak>
  <Navbar></Navbar>
  <div id="content" class="container">
    <h1 class="my-4">{{ $t('index.welcome') }}</h1>
    <p>{{ $t('index.description') }}</p>

    <!-- Fatal Errors Alert -->
    <div class="alert alert-danger my-4" v-if="fancyLogs.find(x => x.level === 'Fatal')">
      <div>
        <div class="d-flex align-items-center mb-3">
          <alert-circle :size="32" class="icon-lg me-3"></alert-circle>
          <div v-html="$t('index.startup_errors')"></div>
        </div>
        <ul class="mb-3">
          <li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{v.value}}</li>
        </ul>
        <a class="btn btn-danger" href="./troubleshooting#logs">
          <file-text :size="18" class="icon"></file-text>
          View Logs
        </a>
      </div>
    </div>

    <!-- ViGEmBus Warning -->
    <div class="alert alert-warning my-4" v-if="platform === 'windows' && controllerEnabled && vigembus && (!vigembus.installed || !vigembus.version_compatible)">
      <div>
        <div class="d-flex align-items-center mb-3">
          <alert-triangle :size="32" class="icon-lg me-3"></alert-triangle>
          <div>
            <div v-if="!vigembus.installed">
              <p class="mb-1"><strong>{{ $t('index.vigembus_not_installed_title') }}</strong></p>
              <p class="mb-0">{{ $t('index.vigembus_not_installed_desc') }}</p>
            </div>
            <div v-else-if="!vigembus.version_compatible">
              <p class="mb-1"><strong>{{ $t('index.vigembus_outdated_title') }}</strong></p>
              <p class="mb-0">{{ $t('index.vigembus_outdated_desc', { version: vigembus.version }) }}</p>
            </div>
          </div>
        </div>
        <a class="btn btn-warning" href="./troubleshooting#vigembus">
          <wrench :size="18" class="icon"></wrench>
          {{ $t('index.fix_now') }}
        </a>
      </div>
    </div>

    <!-- Version -->
    <div class="card my-4">
      <div class="card-body" v-if="version">
        <h2>Version {{version.version}}</h2>

        <div v-if="loading" class="my-3">
          {{ $t('index.loading_latest') }}
        </div>

        <div class="alert alert-success my-3" v-if="buildVersionIsDirty">
          <package :size="18" class="icon"></package>
          {{ $t('index.version_dirty') }} 🌇
        </div>

        <div class="alert alert-info my-3" v-if="installedVersionNotStable">
          <info :size="18" class="icon"></info>
          {{ $t('index.installed_version_not_stable') }}
        </div>

        <div v-else-if="(!preReleaseBuildAvailable || !notifyPreReleases) && !stableBuildAvailable && !buildVersionIsDirty">
          <div class="alert alert-success my-3">
            <check-circle :size="18" class="icon"></check-circle>
            {{ $t('index.version_latest') }}
          </div>
        </div>

        <div v-if="notifyPreReleases && preReleaseBuildAvailable">
          <div class="alert alert-warning my-3">
            <!-- header row -->
            <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
              <div class="d-flex align-items-center gap-3 flex-wrap">
                <alert-circle :size="18" class="icon"></alert-circle>
                <span>{{ $t('index.new_pre_release') }}</span>
                <h5 class="mb-0">{{ preReleaseVersion.release.name }}</h5>
              </div>
              <a class="btn btn-success flex-shrink-0" :href="preReleaseVersion.release.html_url" target="_blank">
                <download :size="18" class="icon"></download>
                {{ $t('index.download') }}
              </a>
            </div>

            <!-- body row (full width) -->
            <div class="markdown-body release-notes" v-html="convertMarkdownToHtml(preReleaseVersion.release.body)"></div>
          </div>
        </div>

        <div v-if="stableBuildAvailable">
          <div class="alert alert-warning my-3">
            <!-- header row -->
            <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
              <div class="d-flex align-items-center gap-3 flex-wrap">
                <alert-circle :size="18" class="icon"></alert-circle>
                <span>{{ $t('index.new_stable') }}</span>
                <h5 class="mb-0">{{ githubVersion.release.name }}</h5>
              </div>
              <a class="btn btn-success flex-shrink-0" :href="githubVersion.release.html_url" target="_blank">
                <download :size="18" class="icon"></download>
                {{ $t('index.download') }}
              </a>
            </div>

            <!-- body row (full width) -->
            <div class="markdown-body release-notes" v-html="convertMarkdownToHtml(githubVersion.release.body)"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Resources -->
    <div class="my-4">
      <Resource-Card></Resource-Card>
    </div>
  </div>
</body>


</html>
