{# -*- coding: utf-8 -*-

  This file is part of Invenio.
  Copyright (C) 2016-2020 CERN.

  Invenio is free software; you can redistribute it and/or modify it
  under the terms of the MIT License; see LICENSE file for more details.
#}

{%- from "invenio_theme/macros/truncate.html" import truncate_text %}
{%- from "invenio_communities/details/macros/access-status-label.html" import access_status_label -%}

<div
  class="ui container fluid page-subheader-outer with-submenu rel-pt-2 ml-0-mobile mr-0-mobile">
  <div class="ui container relaxed grid page-subheader mr-0-mobile ml-0-mobile">
    <div class="row pb-0">
      <div
        class="sixteen wide mobile sixteen wide tablet thirteen wide computer column">
        <div class="community-header flex align-items-center">
          <div class="ui rounded image community-image mt-5 rel-mr-2">
            <img
              src="{{ community.links.logo }}"
              alt=""
              class="has-placeholder"
            />
          </div>

          <div>
            {% if community.access.visibility == 'restricted' %}
              <div class="rel-mb-2 mobile only">
                {{ access_status_label() }}
              </div>
            {% endif %}

            <div class="flex align-items-center mb-5">
              <h1 class="ui large header mb-0">{{ community.metadata.title }}</h1>
              {% if community.access.visibility == 'restricted' %}
                <div class="rel-ml-1 computer only tablet only">
                  {{ access_status_label() }}
                </div>
              {% endif %}
            </div>

            <div>
              {% if community.metadata.website %}
                <div class="inline-computer mt-5 rel-mr-1">
                  <i class="linkify icon" aria-hidden="true"></i>
                  <a href="{{ community.metadata.website }}">
                    {{ community.metadata.website }}
                  </a>
                </div>
              {% endif %}

              {% if community.metadata.type is defined %}
                <div class="inline-computer mt-5 rel-mr-1">
                  <i class="tag icon" aria-hidden="true"></i>
                  <span class="label label-keyword">
                    {{ community.ui.type.title_l10n }}
                  </span>
                </div>
              {% endif %}

              {% if community.metadata.organizations %}
                <div class="inline-computer mt-5 rel-mr-1">
                  <i class="building outline icon" aria-hidden="true"></i>
                  <span
                    class="label label-keyword">{{ community.metadata.organizations| map(attribute='name') | join(', ') }}</span>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>

      <div
        class="sixteen wide mobile sixteen wide tablet three wide computer right aligned middle aligned column">
        <a href="/uploads/new?community={{ community.slug }}"
           class="ui positive button labeled icon rel-mt-1">
          <i class="plus icon" aria-hidden="true"></i>
          {{ _("New upload") }}
        </a>
      </div>


      {# TODO: Add proper statistics #}
      <!-- <div class="two wide floated right column">
        <div class="ui mini statistic">
          <div class="value">
            5,550
          </div>
          <div class="label">
            Views
          </div>
        </div>
      </div>
      <div class="two wide floated right column">
        <div class="ui mini statistic">
          <div class=" value">
            4,200
          </div>
          <div class="label">
            Downloads
          </div>
        </div>
      </div> -->
    </div>
    <div class="ui divider mobile only"></div>
    <div
      class="ui container secondary pointing stackable menu page-subheader pl-0 pr-0">
      {% for item in current_menu.submenu('communities').children if item.permissions == True or permissions[item.permissions] %}
          <a
            class="item {{ 'active' if active_community_header_menu_item == item.name }} {{ 'disabled' if not item.url }}"
            href="{{ item.url }}"
          >
            <i aria-hidden="true" class="{{ item.icon }} icon"></i>
            {{ item.text }}
          </a>
      {% endfor %}
    </div>
  </div>
</div>
