{% extends "base.html" %}

{% block content %}
<div class="columns">
    <div class="column col-12">
        <h1><span class="text-light bg-dark ghost_view_title">
                {% block title %}
                {{ ghost.first_name }}
                {{ ghost.middle_name }}
                {{ ghost.last_name }}
                {% endblock title %}
            </span>
        </h1>

        <h5>{{ computed["age"] }} American Male</h5>
    </div>
</div>
<div class="columns">
    <div class="column col-8">
        {% include "ghosts/tabs/tabs.html" %}
        <div class="card">
            <div class="card-body">
                <button class="btn btn-primary float-right">Save Changes</button>
            </div>
        </div>
    </div>
    <div class="column col-4">
        <div class="panel">
            <div class="panel-header">
                <div class="panel-title h6">Notes</div>
            </div>
            <div class="panel-body">
                <div class="tile">
                    <div class="tile-icon">
                        <figure class="avatar"><img src="../img/avatar-1.png" alt="Avatar"></figure>
                    </div>
                    <div class="tile-content">
                        <p class="tile-title text-bold">Thor Odinson</p>
                        <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too
                            big for any one hero to tackle...</p>
                    </div>
                </div>
                <div class="tile">
                    <div class="tile-icon">
                        <figure class="avatar"><img src="../img/avatar-2.png" alt="Avatar"></figure>
                    </div>
                    <div class="tile-content">
                        <p class="tile-title text-bold">Bruce Banner</p>
                        <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics
                            Division...</p>
                    </div>
                </div>
                <div class="tile">
                    <div class="tile-icon">
                        <figure class="avatar" data-initial="TS"></figure>
                    </div>
                    <div class="tile-content">
                        <p class="tile-title text-bold">Tony Stark</p>
                        <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too
                            big for any one hero to tackle...</p>
                    </div>
                </div>
                <div class="tile">
                    <div class="tile-icon">
                        <figure class="avatar"><img src="../img/avatar-4.png" alt="Avatar"></figure>
                    </div>
                    <div class="tile-content">
                        <p class="tile-title text-bold">Steve Rogers</p>
                        <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics
                            Division...</p>
                    </div>
                </div>
                <div class="tile">
                    <div class="tile-icon">
                        <figure class="avatar"><img src="../img/avatar-3.png" alt="Avatar"></figure>
                    </div>
                    <div class="tile-content">
                        <p class="tile-title text-bold">Natasha Romanoff</p>
                        <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too
                            big for any one hero to tackle...</p>
                    </div>
                </div>
            </div>
            <div class="panel-footer">
                <div class="input-group">
                    <input class="form-input" type="text" placeholder="Hello">
                    <button class="btn btn-primary input-group-btn">Send</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block bottomjs %}
<script src="{{ url_for('static', path='/js/ghost.js') }}"></script>
{% endblock bottomjs %}
