<style>

a {
    text-decoration:none!important;
    color: inherit!important;
}

form.aui .text {
    border-radius: 16px;
    border: 1px solid #564cad;
}

.searchBar form div {
    width: 300px;
    margin: auto;
}

p.confiforms-no-items {
    text-align: center;
    margin: 20px 0px;
}

.announcementcard{
    display:flex;
    padding:10px;
    background-color:#fdfdfd;
    border-radius:16px;
    width:350px;
	height:300px;
    margin:20px;
    box-shadow: 0.2px 4.7px 20px 0 rgba(0, 0, 0, 0.11);
}
.announcementcard:hover{
    box-shadow: 0.2px 6px 20px 0 rgba(0, 0, 0, 0.18);
}

.card-title {
    font-size:20px;
    font-weight:600;
    padding:15px 0px 0px 0px;
}
.card-date {
    font-size:15px;
    font-weight:500;
    padding:15px 0px 0px 0px;
}
.card-description {
    font-size:15px;
    font-weight:200;
    color:#737373;
    padding:20px 10px 0px 0px;
}
.card-age {
    font-size:15px;
    font-weight:200;
    color:#737373;
    padding:0px 0px 0px 5px;
}
.announcementcard img{
    height:35px;
    width:35px;
    padding:10px
}
div#card-footer {
    display: flex;
    align-self:flex-end;
}
div#text-container {
    display: flex;
    flex-direction: column;
}
div#text-encompasser {
    display: flex;
    flex-direction: column;
}
div#imgalign {
    width: 20%;
    display: flex;
    flex-direction: column;
}
div#carousel {
    width: 100%;
    display: flex;
    flex-direction: row;
}
#comments-section { 
   display:none; 
}

</style>




<a href="[entry.link]" data-target="card">
<div class="announcementcard">
<div class="imgalign">
<img src="/download/attachments/1442100/[entry.type].png?api=v2"></img>
</div>
<div id="text-encompasser">
<div id="text-container">
   <font class="card-title">[entry.title]</font>
</div>
<div id="text-container">
   <font class="card-date">[entry.date.formatDate(MM-dd-yyyy)]</font>
</div>
<div id="text-container">
   <font class="card-description">[entry.description]</font>
</div>
</div>
<div id="card-footer">
   <font class="card-title" style="text-align:center">→</font>
</div>
</div>
</a>




  <div class="button-wrapper">
    <button data-action="slideLeft">L</button>
    <button data-action="slideRight">R</button>
  </div>





<style>
#cf_messages {
  height: 200px;
  width: 632px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.button-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
}

.carousel {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: flex;
  position: absolute;
  left: 0;
  transition: all 1s ease;
}

.card {
  background: black;
  min-width: 200px;
  height: 200px;
  margin-right: 1rem;
  display: inline-block;
}
</style>

<script>
// Select the carousel you'll need to manipulate and the buttons you'll add events to
const carousel = document.getElementsByClassName("cf_announcements_list")[0];
const card = document.querySelector("[data-target='card']");
const leftButton = document.querySelector("[data-action='slideLeft']");
const rightButton = document.querySelector("[data-action='slideRight']");

// Prepare to limit the direction in which the carousel can slide, 
// and to control how much the carousel advances by each time.
// In order to slide the carousel so that only three cards are perfectly visible each time,
// you need to know the carousel width, and the margin placed on a given card in the carousel
const carouselWidth = carousel.offsetWidth;
const cardStyle = card.currentStyle || window.getComputedStyle(card)
const cardMarginRight = Number(cardStyle.marginRight.match(/\d+/g)[0]);

// Count the number of total cards you have
const cardCount = carousel.querySelectorAll("[data-target='card']").length;

// Define an offset property to dynamically update by clicking the button controls
// as well as a maxX property so the carousel knows when to stop at the upper limit
let offset = 0;
const maxX = -((cardCount / 3) * carouselWidth + 
               (cardMarginRight * (cardCount / 3)) - 
               carouselWidth - cardMarginRight);


// Add the click events
leftButton.addEventListener("click", function() {
  if (offset !== 0) {
    offset += carouselWidth + cardMarginRight;
    carousel.style.transform = `translateX(${offset}px)`;
    }
})
  
rightButton.addEventListener("click", function() {
  if (offset !== maxX) {
    offset -= carouselWidth + cardMarginRight;
    carousel.style.transform = `translateX(${offset}px)`;
  }
})
</script>