- content_for :page_title do
  = site_hostname

- content_for :header_tags do
  %link{ rel: 'canonical', href: about_url }/
  = render partial: 'shared/og'

.landing-page.alternative
  .header{ style: 'display: none' }
    = image_pack_tag 'header-cybre-alt.jpg', alt: @instance_presenter.site_title
  .container
    .grid
      .column-0
        .brand
          = link_to root_url do
            = image_pack_tag 'logo-cybre.png'
            = Setting.site_title

      - if Setting.timeline_preview
        .column-1
          .landing-page__forms
            .brand
              = link_to root_url do
                = image_pack_tag 'logo_full.svg', alt: 'Mastodon'

            = render 'forms'

      - else
        .column-1.non-preview
          .landing-page__forms
            .brand
              = link_to root_url do
                = image_pack_tag 'logo_full.svg', alt: 'Mastodon'

            = render 'forms'

      - if Setting.timeline_preview
        .column-2
          .landing-page__hero
            = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('background-cybre.png'), alt: @instance_presenter.site_title

          .landing-page__information
            .landing-page__short-description
              .row
                .landing-page__logo
                  = image_pack_tag 'logo-cybre.png', alt: 'Cybrespace'

                %h1
                  = @instance_presenter.site_title
                  %small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)

              %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)

          .landing-page__call-to-action{ dir: 'ltr' }
            .row
              .row__information-board
                .information-board__section
                  %span= t 'about.user_count_before'
                  %strong= number_to_human @instance_presenter.user_count
                  %span= t 'about.user_count_after', count: @instance_presenter.user_count
                .information-board__section
                  %strong= number_to_human @instance_presenter.active_user_count
                  %span= t 'about.active_count_after'
              .row__mascot
                .landing-page__mascot
                  .floats.float-1
                    = image_pack_tag 'floppy-3.svg'
                  .floats.float-2
                    = image_pack_tag 'floppy-1.svg'
                  .floats.float-3
                    = image_pack_tag 'floppy-2.svg'

      - else
        .column-2.non-preview
          .landing-page__hero
            = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title

          .landing-page__information
            .landing-page__short-description
              .row
                .landing-page__logo
                  = image_pack_tag 'logo_transparent.svg', alt: 'Mastodon'

                %h1
                  = @instance_presenter.site_title
                  %small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)

              %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)

          .landing-page__call-to-action
            .row
              .row__information-board
                .information-board__section
                  %span= t 'about.user_count_before'
                  %strong= number_to_human @instance_presenter.user_count
                  %span= t 'about.user_count_after', count: @instance_presenter.user_count
                .information-board__section
                  %strong= number_to_human @instance_presenter.active_user_count
                  %span= t 'about.active_count_after'
              .row__mascot
                .landing-page__mascot
                  = image_tag @instance_presenter.mascot&.file&.url || asset_pack_path('elephant_ui_plane.svg'), alt: ''

      - if Setting.timeline_preview
        .column-3
          #mastodon-timeline{ data: { props: Oj.dump(default_props) } }

      - if Setting.timeline_preview
        .column-4.landing-page__information
          .landing-page__features
            .features-list
              %div
                %h3= t 'about.what_is_mastodon'
                %p= t 'about.about_mastodon_html'
              %div.contact
                %h3= t 'about.administered_by'
                = account_link_to(@instance_presenter.contact_account, link_to(t('about.learn_more'), about_more_path, class: 'button button-alternative'))

            = render 'features'

            .landing-page__features__action
              = link_to t('about.learn_more'), 'https://joinmastodon.org/', class: 'button button-alternative'

          .landing-page__footer
            %p
              = @instance_presenter.site_short_description.html_safe.presence
              = link_to about_more_path do
                = t('about.learn_more')
                = fa_icon 'angle-double-right'