path: root/views/user_profile_alt.hbs

<main id="solutions-main">
<div class="container user-info-content">
<div class="row">

<!-- User Profile details -->
<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 col-xs-offset-0 col-sm-offset-0  toppad prf-details">

    <!-- User Profile Menu -->
    <nav class="navbar navbar-custom">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle"
                        data-toggle="collapse" data-target="#profile-nav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="profile-nav">
                <ul class="nav navbar-nav " >
                    <li><a href="#" class="prf-page">General</a></li>
                    <li><a href="#" class="prf-page">Following</a></li>
                    <!-- Not implemented -->
                    <!--<li><a href="#" class="prf-page">Friends</a></li> -->
                    <li><a href="#" class="prf-page">Send Message</a></li>
                    <li><a href="#" class="prf-page">Inbox</a></li>
                    <li><a href="#" class="prf-page">Comments</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="rounded">
        <div class="panel panel-info rounded">
            <div class="panel-heading">
                <h3 class="panel-title">{{ user.f_name }} {{ user.l_name }}</h3>
            </div>
            <div class="panel-body">
                <!--- User-Profile Pages -->
                <div class="row" id="profile-general">
                    <!-- User Image Not implemented -->
                    <!--<div class="col-md-3 col-lg-3 " align="center">
                        <img alt="User Pic" src="../assets/images/avatar.png"
                             class="img-circle img-responsive">
                    </div> -->
                    <!-- User Details -->
                    <div>
                        <table class="table table-user-information">
                            <tbody>
                            <tr>
                                <td>Email:</td>
                                <td><a href="{{ user.email }}">{{ user.email }}</a></td>
                            </tr>
                            {{# if user.university }}
                                <tr>
                                    <td>University:</td>
                                    <td>{{ user.university }}</td>
                                </tr>
                            {{/if}}
                            {{# if user.department }}
                            <tr>
                                <td>Department:</td>
                                <td>{{ user.department }}</td>
                            </tr>
                            {{/if}}
                            <tr>
                                <td>Answered:</td>
                                <td>{{ user.answered }}</td>
                            </tr>
                            <tr>
                            <tr>
                                <td>Inbox:</td>
                                <td>{{ user.messages }}</td>

                            </tr>
                            <tr>
                                <td>Comments:</td>
                                <td>{{ user.comments }}</td>
                            </tr>
                            {{# if user.phone_num}}
                                <tr>
                                    <td>Phone Number:</td>
                                    <td>{{ user.phone_num }}</td>
                                </tr>
                            {{/if}}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row" id="profile-follows">
                    {{# if user.followers }}
                        <h3>You are being followed by:</h3>
                        <div class="col-xs-offset-1 col-sm-offset-3 col-xs-10 col-sm-6">
                            <table class="table-condensed">
                                <tbody>
                                    {{# each user.followers}}
                                        <tr>
                                            <th>
                                                <img class="img-circle img-responsive"
                                                     src="../assets/images/misc/user1.jpeg" alt="avatar">
                                            </th>
                                            <th>
                                                <h4>The Dude</h4>
                                                <p>3 comments</p>
                                            </th>

                                        </tr>
                                    {{/each}}
                                </tbody>
                            </table>
                        </div>
                    {{ else }}
                        <h3>You are not following any exams.</h3>
                    {{/if}}
                </div>

                <!-- Friends not implemented -->
                <!--
                <div class="row" id="profile-friends">
                    <h3>Friends</h3>
                    <div class="col-xs-offset-1 col-sm-offset-3 col-xs-10 col-sm-6">
                        <table class="table-condensed">
                            <tbody>
                            <tr>
                                <th>
                                    <img class="img-circle img-responsive"
                                         src="../assets/images/misc/user2.jpeg" alt="avatar">
                                </th>
                                <th>
                                    <h4>He-Man</h4>
                                    <p>20 comments</p>
                                </th>
                            </tr>
                            <tr>
                                <th>
                                    <img class="img-circle img-responsive"
                                         src="../assets/images/misc/user5.jpeg" alt="avatar">
                                </th>
                                <th>
                                    <h4>Jay Leno</h4>
                                    <p>5 comments</p>
                                </th>
                            </tr>
                            <tr>
                                <th>
                                    <img class="img-circle img-responsive"
                                         src="../assets/images/misc/user6.jpeg" alt="avatar">
                                </th>
                                <th>
                                    <h4>Lisa Simpson</h4>
                                    <p>658 comments</p>
                                </th>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                -->
                <div class="row" id="profile-send-message">
                    {{# if messages.success }}
                        <section class="alert alert-success">
                            <!-- Change those to banners later -->
                            <h3>{{ messages.success }}</h3>
                        </section>
                    {{ else }}
                        {{# if messages.error }}
                            <section class="alert alert-danger">
                                <h3>{{ messages.error }}</h3>
                            </section>
                        {{/if}}
                    {{/if}}
                    <h3>Send Message</h3>

                    <div class="col-xs-offset-1 col-sm-offset-3 col-xs-10 col-sm-6">
                        <form action="/user/user_profile/send_message" method="post">
                            <div class="form-group">
                                <label for="receiver">Send To:</label>
                                <input type="text" class="form-control" placeholder="Username" name="receiver_username">
                            </div>
                            <div class="form-group">
                                <label for="subject">Subject</label>
                                <input type="text" class="form-control" placeholder="Subject" name="subject">
                            </div>
                            <div class="form-group">
                                <label for="sending-message">Message:</label>
                                <textarea class="form-control" placeholder="Enter message here..." rows="3" name="message"></textarea>
                            </div>
                            <button class="btn btn-primary">Send Message</button>
                            <input type="hidden" name="_csrf" value="{{ csrfToken }}">
                        </form>
                    </div>
                </div>
                <div class="row" id="profile-inbox">
                    {{# if inbox }}
                    <h3>Inbox</h3>
                    <div class="col-sm-10 col-sm-offset-1 prf-tables">
                        <div class="table">
                            <div class="table-row">
                                <div class="table-cell" class="head"><h5>Date</h5></div>
                                <div class="table-cell" class="head"><h5>Subject</h5></div>
                                <div class="table-cell" class="head"><h5>Sender</h5></div>
                            </div>
                            {{# each inbox }}
                            <a href="#" class="table-row" data-toggle="modal" data-target=".{{ this.class }}">
                                <div class="table-cell">{{ this.date }}</div>
                                <div class="table-cell">{{ this.subject }}</div>
                                <div class="table-cell">{{ this.sender }}</div>
                            </a>
                            {{/each}}
                        </div>

                        <!--<table class="table">
                            <thead>
                            <tr>
                                <th>Date</th>
                                <th>Subject</th>
                                <th>Sender</th>
                            </tr>
                            </thead>
                            <tbody>

                            {{# each inbox }}
                                <tr>
                                    <td><a href="#" data-toggle="modal" data-target=".{{ this.class }}">
                                        {{ this.date }}</a></td>
                                    <td><a href="#" data-toggle="modal" data-target=".{{ this.class }}">
                                        {{ this.subject }}</a></td>
                                    <td><a href="#" data-toggle="modal" data-target=".{{ this.class }}">
                                        {{ this.sender }}</a></td>
                                </tr>
                            {{/each}}
                            </tbody>
                        </table> -->

                        {{# each inbox}}
                        <article class="modal fade {{this.class}}">
                            <div class="modal-dialog">
                                <div class="modal-content">

                                    <section class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <h4 class="modal-title"><em>Subject: </em>{{ this.subject }}</h4>
                                        <h5><em>From: </em>{{ this.sender }}</h5>
                                        <em>Date: </em> {{this.date}}
                                    </section>

                                    <section class="modal-body">
                                        {{ this.message }}
                                    </section>

                                    <div class="modal-footer">

                                    </div>

                                </div>
                            </div>
                        </article>
                        {{/each}}
                    </div>
                    {{ else }}
                        <h3>No Messages.</h3>
                    {{/if}}
                </div>
                <div class="row" id="profile-comments">

                    {{# if user.comment_list.length }}
                        <h3>Comment History</h3>
                        <div class="col-sm-10 col-sm-offset-1 prf-tables">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>Date</th>
                                <th>Comment</th>
                                <th>Exam</th>
                            </tr>
                            </thead>
                            <tbody>
                            {{# each user.comment_list }}
                                <tr>
                                    <td>{{ this.date }}</td>
                                    <td>{{ this.comment }}</td>
                                    <td>{{ this.course_code }} > {{ this.term }}
                                        {{ this.year }}</td>
                                </tr>
                            {{/each}}

                        </table>


                        </div>
                    {{else}}
                        <h3>No Comments.</h3>
                    {{/if}}

                </div>

                <!-- Date, Edit, Logout (new row) -->
                <div class="col-md-12 prf-sign-off">
                    <p class=" text-info"> July 4 2016 </p>
                    <a href="#">Edit Profile</a>
                    <a href="#">Logout</a>
                    <br>

                </div>
            </div>
        </div>
    </div>

</div>

</div>
</div>
</main>