{% include 'header.twig' %}

<style>
/* General Styling */
.wrapper-content {
  margin: 0;
  padding: 0;
}

.card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.totals-block__card-right {
  padding: 20px;
  border-radius: 12px;
  margin-right: -10px;
}

.news-item {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: flex-start;
  flex: 1;
}

.news-icon-inline {
  width: 30px;
  margin-right: 10px;
}

.news-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background-color: transparent;
  margin-bottom: 10px;
}

.news-content {
  color: #666;
  font-size: 14px;
}

.news-date {
  font-size: 12px;
  color: #fff;
  background-color: #e70720;
  padding: 4px 8px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 10px;
}

.headsir {
  background-color: #e70720;
  color: #fff;
  font-size: 24px;
  padding: 20px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
}

.ssw {
  max-height: 450px;
  overflow-y: auto;
  padding: 20px;
}

/* Theme-specific Styles */
{% if settings["site_theme_alt"] == "Red" %}
  .totals-block__card-right { background-color: #fbf1f2; }
  svg { fill: #d83346; }
{% elseif settings["site_theme_alt"] == "Blue" %}
  .totals-block__card-right { background-color: #F1F7FC; }
  svg { fill: #1979c8; }
{% elseif settings["site_theme_alt"] == "Lime" %}
  .totals-block__card-right { background-color: #eff7f0; }
  svg { fill: #46b649; }
{% elseif settings["site_theme_alt"] == "Grapes" %}
  .totals-block__card-right { background-color: #f3edff; }
  svg { fill: #6216fb; }
{% elseif settings["site_theme_alt"] == "Dark" %}
  .totals-block__card-right { background-color: #252427; color: #fff; }
  svg { fill: #ff8355; }
{% elseif settings["site_theme_alt"] == "Cyan" %}
  .totals-block__card-right { background-color: #e5f9fa; }
  svg { fill: #32c7ce; }
{% elseif settings["site_theme_alt"] == "Coral" %}
  .totals-block__card-right { background-color: #fff5f4; }
  svg { fill: #ff6b63; }
{% elseif settings["site_theme_alt"] == "Green" %}
  .totals-block__card-right { background-color: #e4f1ef; }
  svg { fill: #307c6f; }
{% elseif settings["site_theme_alt"] == "Grey" %}
  .totals-block__card-right { background-color: #e2e8ee; }
  svg { fill: #ff0000; }
{% elseif settings["site_theme_alt"] == "Lilac" %}
  .totals-block__card-right { background-color: #f5f2f8; }
  svg { fill: #7c96cf; }
{% elseif settings["site_theme_alt"] == "Orange" %}
  .totals-block__card-right { background-color: #fff4ed; }
  svg { fill: #f36b15; }
{% else %}
  .totals-block__card-right { background-color: #252427; color: #fff; }
  svg { fill: #000; }
{% endif %}

@media (max-width: 991px) {
  .totals-block__card-right {
    margin-left: -13px;
    padding-left: 22px;
    border: 2px solid;
    border-radius: 0px 12px 12px 0px;
    margin-right: -10px;
  }
  .news-item {
    flex-direction: column;
    gap: 10px;
  }
}

@media (min-width: 992px) {
  .totals-block__card-right { background-color: #fff; }
  .news-item {
    width: 48%; /* Ensures two items fit in a row */
    margin-right: 4%;
  }
  .news-item:nth-child(even) {
    margin-right: 0;
  }
}
</style>

<div class="wrapper-content">
  <div class="wrapper-content__header"></div>
  <div class="wrapper-content__body">
    <div id="block_93">
      <div class="totals">
        <div class="container-fluid">
          {% if contentText %}
            <div class="card mt-2 mb-2">
              {{ contentText }}
            </div>
          {% endif %}
          <div class="card" style="margin-top: -8px; padding-top: 12px; padding-bottom: 12px;">
            <div class="totals-block__card style-text-primary">
              <h2 class="totals-block__count-value style-text-primary">
                <small style="font-size: 13px; margin-top: 5px; color: black;">
                  Here You Can See All The Latest Updates! 📢
                </small>
              </h2>
            </div>
          </div>
          <div class="component_content_card component_content_button component_content_headers">
            {% if news %}
              <center>
                <div class="card mb-3">
                  <div class="style-bg-primary headsir">Updates</div>
                  <div class="ssw">
                    <div class="row">
                      {% for new in news %}
                        <div class="col-md-6 mb-3"> <!-- This ensures 2 items per row on medium to larger screens -->
                          <div class="news-item card">
                            <div class="card-body">
                              <p class="news-date">
                                <i class="fad fa-calendar-alt mr-1" style="--fa-secondary-opacity: 0.65;"></i>
                                {{ new['news_date'] }}
                              </p>
                              <h4 class="news-title">
                                <img class="news-icon-inline" src="{{ new['news_icon'] }}" />
                                {{ new['news_title'] }}
                              </h4>
                              <p>{{ new['news_content'] }}</p>
                            </div>
                          </div>
                        </div>
                      {% endfor %}
                    </div>
                  </div>
                </div>
              </center>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% if contentText2 %}
  <div class="card mt-3 mb-4">
    {{ contentText2 }}
  </div>
{% endif %}

{% include 'footer.twig' %}
