{% extends 'base.html' %}

{% load markdownify %}

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

        <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>

        <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>

        <ul class="collection with-header">
          <li class="collection-header">
            <span class="title"><b>Inventory Items</b></span>
          </li>

          {% for item in challenge.required_items.all %}
            {% if not item.hidden %}
              <li class="collection-item">
                <span class="">{{ item.item_name }}</span>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
{% endblock %}