{% extends "frontend/base.html" %}
{% block "content" %}

                        <div class="row">

                            <!-- Entry details -->
                            <div class="col-xl-8 col-lg-7">
                                <div class="card shadow mb-4">
                                    <!-- Card Header - Dropdown -->
                                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                        <h6 class="m-0 font-weight-bold text-primary">Dream Entry</h6>

                                    </div>
                                    <!-- Card Body -->
                                    <div class="card-body">
                                        <p><i>{{ object.timestamp }}</i></p>
                                        <h3>{{ object.title }}</h3>
                                        <blockquote>{{ object.content|linebreaks }}</blockquote>
                                    </div>
                                </div>
                            </div>
    
                            <!-- Mood -->
                            <div class="col-xl-4 col-lg-5">
                                <div class="card shadow mb-4">
                                    <!-- Card Header - Dropdown -->
                                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                        <h6 class="m-0 font-weight-bold text-primary">Mood</h6>
                                    </div>
                                    <!-- Card Body -->
                                    <div class="card-body">
                                        <i title="{{ object.mood }}" style="color: {{ object.mood.color }}; font-size: 200px;" title="" class="{{ object.mood.icon }}"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card shadow mb-4">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">Themes</h6>
                            </div>
                            <div class="py-3">
                                <div class="container">
                                  <div class="row" id="cards">
                                      {% for theme in object.dreamtheme_set.all %}
                                        <div class="card"> 
                                            <i title="{{ theme.theme }}" style="display: inline; color: {{ theme.theme.color }}; font-size: 50px;" title="" class="{{ theme.theme.icon }}"></i>
                                        </div> 
                                        {% endfor %}
                                    </div>
                              </div>
                        </div>
                    
                        <div class="card shadow mb-4">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">Attachments</h6>
                            </div>
                            <div class="py-3">
                                <div class="container">
                                  <ul>
                                      {% for attachment in object.dreammedia_set.all %}
                                      <li><a href="{{ attachment.media.url }}">{{ attachment.basename }}</a></li>
                                      {% endfor %}
                                  </ul>
                              </div>
                        </div>

                    </div>

{% endblock %}