{% load css_tags %}{% block_css 'enap_designsystem/blocks/card_curso_block.css' %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block content %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
{% load wagtailcore_tags wagtailimages_tags %}
<style>
  .wrapper-button-center button {
    border-color: var(--highlight-color);
    color: var(--highlight-color);
  }
  
  .wrapper-button-center button:hover {
    background-color: var(--highlight-color);
    color: white;
  }

  .card-tag span {
    color: var(--highlight-color);
    font-weight: 600;
  }
</style>
<div class="card-curso-grid">
<div class="card-curso {{ self.type }}" style="--highlight-color: {{ self.highlight_color|default:'#c3e92e' }}">
  <div class="card-tag">
    {% if self.type == 'card-curso-em-breve' %}
      <span>Em breve</span>
    {% elif self.type == 'card-curso-aberto' %}
      <span>Inscrições abertas</span>
    {% elif self.type == 'card-curso-andamento' %}
      <span>Em andamento</span>
    {% elif self.type == 'card-curso-encerrado' %}
      <span>Encerrado</span>
    {% endif %}
  </div>
  
  <div class="wrapper-text-card">
    <h2 class="h2-card">{{ self.title }}</h2>
    
    <div class="p-card">
      {{ self.description|richtext }}
    </div>
  </div>
  
  <div class="card-info">
    <div class="info-item">
      <i class="fa-solid fa-clock" style="color: var(--highlight-color);"></i>
      <span class="info-text">Carga-horária: {{ self.carga_horaria }}</span>
    </div>
    
    <div class="info-item">
      {% if self.modalidade == 'presencial' %}
        <i class="fa-solid fa-location-dot"></i>
      {% elif self.modalidade == 'online' %}
        <i class="fa-solid fa-laptop"></i>
      {% elif self.modalidade == 'hibrido' %}
        <i class="fa-solid fa-globe"></i>
      {% endif %}
      <span class="info-text">{{ self.modalidade|title }}</span>
    </div>
  </div>
  
  <div class="share-button">
    <button type="button" aria-label="Compartilhar">
      <i class="fa-solid fa-share-nodes"></i>
    </button>
  </div>
  
  {% if self.link %}
    <div class="wrapper-button-center">
      {% include_block self.link %}
    </div>
  {% endif %}
</div>
</div>
{% endblock %}