profile.html

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

    <!-- codes below from materializecss.com and CI tutorials -->
    <h3 class="center-align blue-grey-text text-lighten-5">{{ username.capitalize() }}'s Profile</h3>
    
    <div class="row container">
        <div class="col s12">
            <ul class="collapsible popout">
                {% for post in posts|sort(reverse=true, attribute="date_post") %}
                    {% if session.user|lower == post.posted_by|lower %}
                        <li>
                            <div class="collapsible-header blue-grey-text text-lighten-5">
                                <div class="row valign-wrapper">
                                    <div class="col s12 m3 img-container">
                                        <img src="{{ post.image_link }}" alt="{{ post.image_title }}" class="materialboxed responsive-img">
                                        <span>{{ post.image_title }}</span>
                                    </div>
                                    <div class="col s12 m6">
                                        <h5>{{ post.title_text }}</h5>
                                        <span class="post-date">{{ post.date_post }}</span>
                                        <span class="post-category">{{ post.category_name }}</span>
                                        {% for summaryline in post.summary %}
                                            <p>
                                            {{ summaryline }}
                                            </p>
                                        {% endfor %}
                                        
                                    </div>
                                    <div class="col s12 m3">
                                        <a href="{{ url_for('edit_post', post_id=post._id) }}"
                                            class="post-button waves-effect waves-light btn blue-grey-text text-lighten-5 grey darken-2">
                                            Edit
                                        </a>
                                        <!-- Delete button - defensive programming (Ed B_alum - Slack)  -->
                                        <!-- Modal Trigger -->
                                        <button data-target="{{ post._id }}" class="post-button modal-trigger waves-effect waves-light btn blue-grey-text text-lighten-5 grey darken-2">
                                            Delete
                                        </button>
                                        <!-- Modal Structure -->
                                        <div id="{{ post._id }}" class="modal blue-grey lighten-5">
                                            <div class="modal-content">
                                                <h4 class="delete-color center-align">Are you sure you want to DELETE your post {{ post.title_text }}?</h4>
                                            </div>
                                            <div class="modal-footer blue-grey lighten-5">
                                                <button class="modal-close btn-flat cancel-btn blue-grey-text text-lighten-5">Cancel</button>
                                                <a href="{{ url_for('delete_userpost', post_id=post._id) }}" class="modal-close btn-flat blue-grey-text text-lighten-5 grey darken-2">Delete</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="collapsible-body blue-grey-text text-lighten-5">
                                <!-- iterates through post_body list -->
                                {% for body in post.post_body %}
                                    <p class="main-p">{{ body }}</p>
                                {% endfor %}
                                <p class="user-p">Posted by: <em class="p-italic">{{ post.posted_by }}</em></p>
                                <p class="email-p">Email: <em class="p-italic">{{ post.email }}</em></p>
                            </div>
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div>
    
{% endblock %}