{% set page_title = 'User Activity' %}
{% set header_image = 'assets/images/light/game-journey-1400x460.jpg' %}
{% set header_size = 'small' %}
{% set header_show = 'user' %}

{% extends 'layouts/layout-light.html' %}

{% block content %}
    <div class="container youplay-content">

        <div class="row">

            <div class="col-md-9">

                <!-- Activity -->
                <h2 class="mt-0">Activity</h2>
                <div class="youplay-timeline">

                    <!-- Timeline Notification -->
                    <div class="youplay-timeline-block">
                        <!-- icon -->
                        <div class="youplay-timeline-icon bg-warning">
                            <i class="fa fa-bell"></i>
                        </div>
                        <!-- /icon -->

                        <!-- content -->
                        <div class="youplay-timeline-content">
                            <h3 class="mb-0">Notification</h3>
                            <span class="youplay-timeline-date pt-0">20 minutes ago</span>
                            <p>We invite you to test-drive the new service <a href="#">Lorem</a>. Confirm the invitation and we will send you notes and hints.</p>
                            <a href="#" class="btn">Confirm</a>
                            <a href="#">Cancel</a>
                        </div>
                        <!-- content -->
                    </div>
                    <!-- /Timeline Notification -->


                    <!-- Timeline Message -->
                    <div class="youplay-timeline-block">
                        <!-- icon -->
                        <div class="youplay-timeline-icon bg-primary">
                            <img src="assets/images/light/avatar-user-2.png" alt="John Doe" title="John Doe">
                        </div>
                        <!-- /icon -->

                        <!-- content -->
                        <div class="youplay-timeline-content">
                            <h3 class="mb-0">Message</h3>
                            <span class="youplay-timeline-date pt-0">Saturday, March 8, 2015</span>
                            Received a <a href="#">message</a> from <strong>Max Brooks</strong>
                        </div>
                        <!-- /content -->
                    </div>
                    <!-- /Timeline Message -->

                    <!-- Timeline Video -->
                    <div class="youplay-timeline-block">
                        <!-- icon -->
                        <div class="youplay-timeline-icon bg-success">
                            <i class="fab fa-youtube"></i>
                        </div>
                        <!-- /icon -->

                        <!-- content -->
                        <div class="youplay-timeline-content">
                            <h3 class="mb-0">New Electro &amp; House</h3>
                            2015 Party Music Collab Mix
                            <span class="youplay-timeline-date pt-0">Published on Jan 10, 2015</span>
                            <div class="responsive-embed responsive-embed-16x9">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/hjyBYhdRXQU" allowfullscreen></iframe>
                            </div>
                        </div>
                        <!-- /content -->
                    </div>
                    <!-- /Timeline Video -->

                    <!-- Timeline Map -->
                    <div class="youplay-timeline-block">
                        <!-- icon -->
                        <div class="youplay-timeline-icon">
                            <i class="fa fa-map-marker"></i>
                        </div>
                        <!-- /icon -->

                        <!-- content -->
                        <div class="youplay-timeline-content">
                            <h3 class="mb-0">My New Location</h3>
                            <span class="youplay-timeline-date pt-0">Jan 24</span>

                            <div class="responsive-embed responsive-embed-16x9">
                                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d423284.59051352815!2d-118.41173249999999!3d34.0204989!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2z0JvQvtGBLdCQ0L3QtNC20LXQu9C10YEsINCa0LDQu9C40YTQvtGA0L3QuNGPLCDQodCo0JA!5e0!3m2!1sru!2sru!4v1430158354122" width="600" height="450"></iframe>
                            </div>
                        </div>
                        <!-- /content -->
                    </div>
                    <!-- /Timeline Map -->

                </div>
                <!-- /Activity -->


                <!-- Skills -->
                <h2>Skills</h2>
                JS:
                <div class="progress youplay-progress">
                    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                        <span class="sr-only">40% Complete (success)</span>
                    </div>
                </div>

                CSS:
                <div class="progress youplay-progress">
                    <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                        <span class="sr-only">20% Complete</span>
                    </div>
                </div>

                PHP:
                <div class="progress youplay-progress">
                    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                        <span class="sr-only">60% Complete (warning)</span>
                    </div>
                </div>

                Photoshop:
                <div class="progress youplay-progress">
                    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                        <span class="sr-only">80% Complete (danger)</span>
                    </div>
                </div>
                <!-- /Skills -->
            </div>

            <!-- Right Side -->
            <div class="col-md-3">
                {% include "shared/light-sidebar-user.html" %}
            </div>
            <!-- Right Side -->

        </div>

    </div>
{% endblock %}