{% extends '@App/partials/base.html.twig' %}

{% block content %}

  <div class="body-wrapper">
    <div class="container-fluid">

      <div class="card card-body py-3">
        <div class="row align-items-center">
          <div class="col-12">
            <div class="d-sm-flex align-items-center justify-space-between">
              <h4 class="fs-7 fw-bolder mb-4 mb-sm-0 card-title">Événements</h4>
            </div>
          </div>
        </div>
      </div>


    <section class="pt-5 pt-md-14 pb-4 pb-md-5">
      <div class="container-fluid">
          

          <div class="d-flex justify-content-center">
            <ul class="nav nav-pills user-profile-tab" id="pills-tab" role="tablist">
              <li class="nav-item" role="presentation">
                <button class="nav-link position-relative rounded-0 d-flex align-items-center justify-content-center bg-transparent fs-3 py-3 active" id="pills-info-tab" data-bs-toggle="pill" data-bs-target="#pills-info" type="button" role="tab" aria-controls="pills-info" aria-selected="false" tabindex="-1">
                  <span class="d-none d-md-block">Événements à venir</span>
                </button>
              </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link position-relative rounded-0 d-flex align-items-center justify-content-center bg-transparent fs-3 py-3" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false" tabindex="-1">
                    <span class="d-none d-md-block">Événements passés</span>
                  </button>
                </li>
            </ul>
          </div>

          <div class="card-body mt-2">
            <div class="tab-content" id="pills-tabContent">
              <div class="tab-pane fade active show" id="pills-info" role="tabpanel" aria-labelledby="pills-info-tab" tabindex="0">
                {% include '@Evenement/evenement/portail/part/tab_event_avenir.html.twig' %}
              </div>
              
              <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
                {% include '@Evenement/evenement/portail/part/tab_event_passe.html.twig' %}
              </div>

            </div>
          </div>

      </div>
    </section>

  </div>

<style>
h1 {
    text-transform: uppercase;
    font-weight: 900;
    border-left: 10px solid #fec500;
    padding-left: 10px;
    margin-bottom: 30px
}

.date {
    display: table-cell;
    width: 33%;
    position: relative;
    text-align: center;
    border-right: 1px dashed #dadde6
}

.date time {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.date time span {
    display: block
}

.date time span:first-child {
    color: #2b2b2b;
    font-weight: 900;
    font-size: 350%
}

.date time span:last-child {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 125%;
    margin-top: -10px
}

.card-cont {
    display: table-cell;
    width: 75%;
    padding: 10px 10px 30px 50px
}

.card-cont h3 {
    color: #3C3C3C;
    font-size: 130%
}

.card-cont>div {
    display: table-row
}

.card-cont .even-date i,
.card-cont .even-info i,
.card-cont .even-date time,
.card-cont .even-info p {
    display: table-cell
}

.card-cont .even-date i,
.card-cont .even-info i {
    padding: 5% 5% 0 0
}

.card-cont .even-info p {
    padding: 30px 50px 0 0
}

.card-cont .even-date time span {
    display: block
}


.row:last-child .card:first-child .card-cont a {
    background-color: #037FDD
}

.row:last-child .card:last-child .card-cont a {
    background-color: #F8504C
}

@media screen and (max-width: 860px) {
    .card {
        display: block;
        float: none;
        width: 100%;
        margin-bottom: 10px
    }
    .card-cont .even-date,
    .card-cont .even-info {
        font-size: 75%
    }
}

.shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* x, y, blur, color */
  padding: 20px;
  background-color: white;
  border-radius: 8px; /* optionnel pour un effet plus doux */
}
</style>
{% endblock %}