{% extends 'base.html' %}

{% load markdownify %}

{% block content %}
  <div class="row container">
    <div class="row">
      <div class="col m8">
        <h3 class="">{{ challenge.name }}</h3>

        <div>
          {% for tag in challenge.tags.all %}
            <div class="chip">{{ tag.name }}</div>
          {% endfor %}
        </div>

        <p style="">{{ challenge.description | markdownify }}</p>

        <div class="section">
          {% if challenge.creator.profile.contact_info %}
            <p>{{ challenge.creator.profile.contact_info }}</p>
          {% endif %}
          {% if challenge.creator.email %}
            <div class="valign-wrapper"><i class="material-icons">email</i>&nbsp;{{ challenge.creator.email }}</div>
            <br>
          {% endif %}
          {% if challenge.creator.profile.phone_number %}
            <div class="valign-wrapper"><i class="material-icons">phone</i>&nbsp;{{ challenge.creator.profile.phone_number }}</div>
          {% endif %}
        </div>
      </div>

      <div class="col m4">
        <ul class="collection">
          <li class="collection-item avatar">
            <img src="/media/{{ challenge.creator.profile.icon }}"
                 alt="" class="circle">
            <span class="title">Author</span>
            <p><b>{{ challenge.creator.username }}</b></p>
          </li>

        </ul>

        {% if challenge.tags|length > 0 %}
          <ul class="collection with-header">
            <li class="collection-header">
              <span class="title"><b>Tags</b></span>
            </li>

            {% for tag in challenge.tags.all %}
              <li class="collection-item">
                <span class="">{{ tag.name }}</span>
              </li>
            {% endfor %}
          </ul>
        {% endif %}

        {% if challenge.tags|length > 0 %}
          <ul class="collection with-header">
            <li class="collection-header">
              <span class="title"><b>Tags</b></span>
            </li>

            {% for tag in challenge.tags.all %}
              <li class="collection-item">
                <span class="">{{ tag.name }}</span>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </div>
    </div>
  </div>
{% endblock %}