{% extends 'base.html' %}

{% load markdownify %}

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

        {% if challenge.description %}
          <p style="">{{ challenge.description | markdownify }}</p>
        {% else %}
          <p style="">{{ challenge.blurb | markdownify }}</p>
        {% endif %}

        <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.get_full_name }}</b></p>
          </li>
        </ul>

        {% if challenge.tags.all %}
        <p>Relevant keywords:</p>
        <ul class="browser-default">
          {% for tag in challenge.tags.all %}
            <li class="collection-item">
              <span class="">{{ tag.name }}</span>
            </li>
          {% endfor %}
        </ul>
        {% endif %}

        {% if challenge.required_items.all %}
        <p>Relevant inventory:</p>

        <ul class="browser-default">
          {% 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>
        {% endif %}
      </div>
    </div>
  </div>
{% endblock %}