{{template "header" .}}
<div class="home-grid{{ if not .NEWS }} no-news{{ end }}">
  {{ if .NEWS }}
  <div class="alpha-notice color-{{ .NEWS.Color }}">
    <div class="alpha-notice-title">{{ .NEWS.Label }}</div>
    <div class="alpha-notice-text">
      {{ .NEWS.Body }}
      {{ if .NEWS.Signature }}<span class="alpha-notice-signature">{{ .NEWS.Signature }}</span>{{ end }}
    </div>
  </div>
  {{ end }}
  <div class="connect-options">
    <div class="connect-top">
      <div class="connect-cta">
        <div class="connect-button-sub">Play using the web client</div>
        <a href="/webclient" class="connect-button">Play Now</a>
      </div>
      <div class="connect-divider-vertical" aria-hidden="true">
        <span></span><span></span><span></span><span></span><span></span>
      </div>
      <div class="connect-telnet-info">
        <div class="connect-button-sub">Play using a normal MUD client</div>
        <div class="connect-telnet-intro">Connect to <span class="connect-port-value">willowdalemud.com</span></div>
        <div class="connect-ports">
          <span class="connect-port-label">Standard telnet port:</span>
          <span class="connect-port-value">{{ join .CONFIG.Network.TelnetPort ", " }}</span>
          {{ if and .CONFIG.Network.SecureTelnetPort (ne (index .CONFIG.Network.SecureTelnetPort 0) "0") }}
          <span class="connect-port-label">Secure (TLS) port:</span>
          <span class="connect-port-value">{{ join .CONFIG.Network.SecureTelnetPort ", " }}</span>
          {{ end }}
        </div>
      </div>
    </div>
    <div class="connect-bottom">
      <div class="connect-mudlet-note">
        We recommend
        <a href="https://www.mudlet.org" class="inline-link" target="_blank">Mudlet</a>
        for telnet connections.
      </div>
    </div>
  </div>
  <div class="chronicles-box">
    {{ if .LORE_FEATURE }}
    <article class="chronicles-entry">
      <h3 class="chronicles-entry-heading">Lore - {{ .LORE_FEATURE.Title }}</h3>
      <p class="chronicles-entry-excerpt">{{ .LORE_FEATURE.Excerpt }}</p>
      <a class="chronicles-entry-link" href="/lore/{{ .LORE_FEATURE.Slug }}">Read more &rsaquo;</a>
    </article>
    {{ end }}
    {{ if .AREA_FEATURE }}
    <article class="chronicles-entry">
      <h3 class="chronicles-entry-heading">Atlas - {{ .AREA_FEATURE.Title }}</h3>
      {{ if .AREA_FEATURE.Summary }}<p class="chronicles-entry-excerpt">{{ .AREA_FEATURE.Summary }}</p>{{ end }}
      <a class="chronicles-entry-link" href="/atlas/{{ .AREA_FEATURE.MapId }}">Read more &rsaquo;</a>
    </article>
    {{ end }}
    {{ if .BOOK_FEATURE }}
    <article class="chronicles-entry">
      <h3 class="chronicles-entry-heading">Books &amp; Stories{{ if .BOOK_FEATURE.Series }} - {{ .BOOK_FEATURE.Series }}{{ end }}</h3>
      {{ if .BOOK_FEATURE.Summary }}<p class="chronicles-entry-excerpt">{{ .BOOK_FEATURE.Summary }}</p>{{ end }}
      <a class="chronicles-entry-link" href="/lore/books/{{ .BOOK_FEATURE.Slug }}">Read more &rsaquo;</a>
    </article>
    {{ end }}
  </div>
  {{ if .CHANGELOG }}
  <div class="changelog-wrapper">
    <div class="changelog-box">
      <div class="changelog-header">
        <div class="changelog-title">Recent Changes</div>
        <div class="changelog-scroll-hint">Scroll for more</div>
      </div>
      <div class="changelog-entries">
        {{ range .CHANGELOG }}
        <div class="changelog-entry">
          <div class="changelog-entry-header">
            <span class="changelog-date">{{ .Date }}</span>
            {{ if .Version }}
            <span class="changelog-version">v{{ .Version }}</span>
            {{ end }}
          </div>
          <div class="changelog-message">{{ .Message }}</div>
        </div>
        {{ end }}
      </div>
    </div>
  </div>
  {{ end }}
</div>
{{template "footer" .}}