<div class="section-with-cards">
  <div class="course-home-headings">{{title}}</div>
  {%- if subtitle -%}
  <p class="section-description">{{ subtitle }}</p>
  {%- endif -%}
  <div class="cards-parent">

    {% for talk in talk_details %}

    {% set talk_doc = frappe.db.get_value('Talk', talk.talk,
    ["title", "category", "speaker", "url", "thumbnail", "date", "start_time", "end_time"], as_dict=True) %}
    {% set speaker_info = frappe.db.get_value("Speaker", talk_doc.speaker, ["user"], as_dict=True) %}
    {% set member = frappe.get_doc("User", speaker_info.user) %}

    {% if talk_doc.thumbnail %}
    {% set thumbnail = talk_doc.thumbnail %}
    {% else %}
    {% set video_id = talk_doc.url and talk_doc.url.split("/")[-1] %}
    {% set thumbnail = video_id and "https://img.youtube.com/vi/" + video_id + "/maxresdefault.jpg" %}
    {% endif %}

    <div class="common-card-style flex-column">
      <div class="course-image {% if not thumbnail %}default-image{% endif %}" {% if thumbnail %}
        style="background-image: url( {{ thumbnail }} );" {% endif %}>
        <div class="course-tags">
          {% for tag in talk_doc.category.split(",") %}
          <div class="course-card-pills">{{ tag }}</div>
          {% endfor %}
        </div>
        {% if not thumbnail %}
        <div class="default-image-text">{{ talk_doc.title[0] }}</div>
        {% endif %}
      </div>
      <div class="course-card-content">
        <div class="course-card-content"></div>
        <div class="course-card-title">{{talk_doc.title}}</div>
        <div class="muted-text mb-3">
          {% if talk_doc.date %}
          <span>
            <img src="/assets/community/icons/calendar.svg">
            {{ frappe.utils.format_date(talk_doc.date, "medium") }}
          </span>
          {% endif %}
          <span class="pull-right">
            {% if talk_doc.start_time %}
            <span class="mr-3">
              <b>From:</b>
              {{ frappe.utils.format_time(talk_doc.start_time, "HH:mm") }}
            </span>
            {% endif %}
            {% if talk_doc.end_time %}
            <span>
              <b>To:</b>
              {{ frappe.utils.format_time(talk_doc.end_time, "HH:mm") }}
            </span>
            {% endif %}
          </span>
        </div>
        <div class="card-divider"></div>
        <div class="course-card-meta-2">
          {{ widgets.Avatar(member=member, avatar_class="avatar-small")}}
          <span class="course-instructor"> {{ member.full_name }} </span>
          <span class="small-title company-name"></span>
        </div>
        <div class="view-talk-link">
          Vew Talk
          <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
        </div>
        <a class="stretched-link" href="{{talk_doc.url}}"></a>
      </div>
    </div>
    {% endfor %}

  </div>
</div>
