{% extends "core/base.jinja" %}
{% from "com/macros.jinja" import news_moderation_alert %}

{% block title %}
  {% trans %}News{% endtrans %}
{% endblock %}

{% block additional_css %}
  <link rel="stylesheet" href="{{ static('com/css/news-list.scss') }}">
  <link rel="stylesheet" href="{{ static('com/components/ics-calendar.scss') }}">

  {# Atom feed discovery, not really css but also goes there #}
  <link rel="alternate" type="application/rss+xml" title="{% trans %}News feed{% endtrans %}" href="{{ url("com:news_feed") }}">
{% endblock %}

{% block additional_js %}
  <script type="module" src={{ static("bundled/com/components/ics-calendar-index.ts") }}></script>
  <script type="module" src={{ static("bundled/com/components/moderation-alert-index.ts") }}></script>
  <script type="module" src={{ static("bundled/com/components/upcoming-news-loader-index.ts") }}></script>
{% endblock %}

{% block content %}
  <div id="news">
    <div id="left_column" class="news_column">
      <h3>
        {% trans %}Events today and the next few days{% endtrans %}
        <a target="#" href="{{ url("com:news_feed") }}"><i class="fa fa-rss feed"></i></a>
      </h3>
      {% if user.is_authenticated and (user.is_com_admin or user.memberships.board().ongoing().exists()) %}
        <a class="btn btn-blue margin-bottom" href="{{ url("com:news_new") }}">
          <i class="fa fa-plus"></i>
          {% trans %}Create news{% endtrans %}
        </a>
      {% endif %}
      {% if user.is_com_admin %}
        <a class="btn btn-blue" href="{{ url('com:news_admin_list') }}">
          {% trans %}Administrate news{% endtrans %}
        </a>
        <br>
      {% endif %}
      <section id="upcoming-events">
        {% if not news_dates %}
          <div class="news_empty">
            <em>{% trans %}Nothing to come...{% endtrans %}</em>
          </div>
        {% else %}
          {% for day, dates_group in news_dates %}
            <div class="news_events_group">
              <div class="news_events_group_date">
                <div>
                  <div>{{ day|date('D') }}</div>
                  <div class="day">{{ day|date('d') }}</div>
                  <div>{{ day|date('b') }}</div>
                </div>
              </div>
              <div class="news_events_group_items">
                {% for date in dates_group %}
                  <article
                    class="news_event"
                    {%- if not date.news.is_moderated -%}
                      x-data="{newsState: AlertState.PENDING}"
                    {%- endif -%}
                  >
                    {% if not date.news.is_moderated %}
                      {# if a non moderated news is in the object list,
                      the logged user is either an admin or the news author #}
                      {{ news_moderation_alert(date.news, user, "newsState") }}
                    {% endif %}
                    <div
                      {% if not date.news.is_moderated -%}
                        x-show="newsState !== AlertState.DELETED"
                      {%- endif -%}
                    >
                      <header class="row gap">
                        {% if date.news.club.logo %}
                          <img src="{{ date.news.club.logo.url }}" alt="{{ date.news.club }}"/>
                        {% else %}
                          <img src="{{ static("com/img/news.png") }}" alt="{{ date.news.club }}"/>
                        {% endif %}
                        <div class="header_content">
                          <h4>
                            <a href="{{ url('com:news_detail', news_id=date.news_id) }}">
                              {{ date.news.title }}
                            </a>
                          </h4>
                          <a href="{{ date.news.club.get_absolute_url() }}">{{ date.news.club }}</a>
                          <div class="news_date">
                            <time datetime="{{ date.start_date.isoformat(timespec="seconds") }}">
                              {{ date.start_date|localtime|time(DATETIME_FORMAT) }}
                            </time> -
                            <time datetime="{{ date.end_date.isoformat(timespec="seconds") }}">
                              {{ date.end_date|localtime|time(DATETIME_FORMAT) }}
                            </time>
                          </div>
                        </div>
                      </header>
                      <div class="news_content markdown">
                        {{ date.news.summary|markdown }}
                      </div>
                    </div>
                  </article>
                {% endfor %}
              </div>
            </div>
          {% endfor %}
          <div x-data="upcomingNewsLoader(new Date('{{ last_day + timedelta(days=1) }}'))">
            <template x-for="newsList in Object.values(groupedDates())">
              <div class="news_events_group">
                <div class="news_events_group_date">
                  <div x-data="{day: newsList[0].start_date}">
                    <div x-text="day.toLocaleString('{{ get_language() }}', { weekday: 'short' }).substring(0, 3)"></div>
                    <div
                      class="day"
                      x-text="day.toLocaleString('{{ get_language() }}', { day: 'numeric' })"
                    ></div>
                    <div x-text="day.toLocaleString('{{ get_language() }}', { month: 'short' }).substring(0, 3)"></div>
                  </div>
                </div>
                <div class="news_events_group_items">
                  <template x-for="newsDate in newsList" :key="newsDate.id">
                    <article
                      class="news_event"
                      x-data="{ newsState: newsDate.news.is_moderated ? AlertState.MODERATED : AlertState.PENDING }"
                    >
                      <template x-if="!newsDate.news.is_moderated">
                        {{ news_moderation_alert("newsDate.news.id", user, "newsState") }}
                      </template>
                      <div x-show="newsState !== AlertState.DELETED">
                        <header class="row gap">
                          <img
                            :src="newsDate.news.club.logo || '{{ static("com/img/news.png") }}'"
                            :alt="newsDate.news.club.name"
                          />
                          <div class="header_content">
                            <h4>
                              <a :href="newsDate.news.url" x-text="newsDate.news.title"></a>
                            </h4>
                            <a :href="newsDate.news.club.url" x-text="newsDate.news.club.name"></a>
                            <div class="news_date">
                              <time
                                :datetime="newsDate.start_date.toISOString()"
                                x-text="`${newsDate.start_date.getHours()}:${newsDate.start_date.getMinutes()}`"
                              ></time> -
                              <time
                                :datetime="newsDate.end_date.toISOString()"
                                x-text="`${newsDate.end_date.getHours()}:${newsDate.end_date.getMinutes()}`"
                              ></time>
                            </div>
                          </div>
                        </header>
                        {# The API returns a summary in html.
                           It's generated from our markdown subset, so it should be safe #}
                        <div class="news_content markdown" x-html="newsDate.news.summary"></div>
                      </div>
                    </article>
                  </template>
                </div>
              </div>
            </template>

            <div id="load-more-news-button" :aria-busy="loading">
              <button class="btn btn-grey" x-show="!loading && hasNext" @click="loadMore()">
                {% trans %}See more{% endtrans %} &nbsp;<i class="fa fa-arrow-down"></i>
              </button>
              <p x-show="!loading && !hasNext">
                <em>
                  {% trans trimmed %}
                    It was too short.
                    You already reached the end of the upcoming events list.
                  {% endtrans %}
                </em>
              </p>
            </div>
          </div>
        {% endif %}
      </section>

      <h3>
        {% trans %}All coming events{% endtrans %}
        <a target="#" href="{{ url("com:news_feed") }}"><i class="fa fa-rss feed"></i></a>
      </h3>
      <ics-calendar locale="{{ get_language() }}"></ics-calendar>
    </div>

    <div id="right_column">
      <div id="links">
        <h3>{% trans %}Links{% endtrans %}</h3>
        <div id="links_content">
          <h4>{% trans %}Our services{% endtrans %}</h4>
          <ul>
            <li>
              <i class="fa-solid fa-graduation-cap fa-xl"></i>
              <a href="{{ url("pedagogy:guide") }}">{% trans %}UV Guide{% endtrans %}</a>
            </li>
            <li>
              <i class="fa-solid fa-magnifying-glass fa-xl"></i>
              <a href="{{ url("matmat:search_clear") }}">{% trans %}Matmatronch{% endtrans %}</a>
            </li>
            <li>
              <i class="fa-solid fa-check-to-slot fa-xl"></i>
              <a href="{{ url("election:list") }}">{% trans %}Elections{% endtrans %}</a>
            </li>
          </ul>
          <br>
          <h4>{% trans %}Social media{% endtrans %}</h4>
          <ul>
            <li>
              <i class="fa-brands fa-discord fa-xl"></i>
              <a rel="nofollow" target="#" href="https://discord.gg/QvTm3XJrHR">
                {% trans %}Discord AE{% endtrans %}
              </a>
              {% if user.was_subscribed %}
                - <a rel="nofollow" target="#" href="https://discord.gg/u6EuMfyGaJ">
                  {% trans %}Dev Team{% endtrans %}
                </a>
              {% endif %}
            </li>
            <li>
              <i class="fa-brands fa-facebook fa-xl"></i>
              <a rel="nofollow" target="#" href="https://www.facebook.com/@AEUTBM/">
                Facebook
              </a>
            </li>
            <li>
              <i class="fa-brands fa-square-instagram fa-xl"></i>
              <a rel="nofollow" target="#" href="https://www.instagram.com/ae_utbm">
                Instagram
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div id="birthdays">
        <h3>{% trans %}Birthdays{% endtrans %}</h3>
        <div id="birthdays_content">
          {%- if user.has_perm("core.view_user") -%}
            <ul class="birthdays_year">
              {%- for year, users in birthdays -%}
                <li>
                  {% trans age=timezone.now().year - year %}{{ age }} year old{% endtrans %}
                  <ul>
                    {%- for u in users -%}
                      <li><a href="{{ u.get_absolute_url() }}">{{ u.get_short_name() }}</a></li>
                    {%- endfor -%}
                  </ul>
                </li>
              {%- endfor -%}
            </ul>
          {%- elif not user.was_subscribed -%}
            {# The user cannot view birthdays, because he never subscribed #}
            <p>{% trans %}You need to subscribe to access this content{% endtrans %}</p>
          {%- else -%}
            {# There is another reason why user cannot view birthdays (maybe he is banned)
               but we cannot know exactly what is this reason #}
            <p>{% trans %}You cannot access this content{% endtrans %}</p>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
{% endblock %}