<div class="page page-profile">




  <!-- page header -->
  <div class="pageheader">

    <h2>{{page.title}} <span>// {{page.subtitle}}</span></h2>

    <div class="page-bar">

      <ul class="page-breadcrumb">
        <li>
          <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a>
        </li>
        <li>
          <a href="javascript:;">Extra Pages</a>
        </li>
        <li>
          <a ui-sref="app.pages.profile">{{page.title}}</a>
        </li>
      </ul>

    </div>

  </div>
  <!-- /page header -->






  <!-- page content -->
  <div class="pagecontent">


    <!-- row -->
    <div class="row">






      <!-- col -->
      <div class="col-md-4">

        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile widget -->
          <div class="tile-widget p-30 text-center">

            <div class="thumb thumb-xl">
              <img class="img-circle" src="images/arnold-avatar.1df41c32.jpg" alt="">
            </div>
            <h4 class="mb-0"><strong>John</strong> Douey</h4>
            <span class="text-muted">Project Manager</span>
            <div class="mt-10">
              <button class="btn btn-rounded-20 btn-sm btn-greensea">Follow</button>
              <button class="btn btn-rounded-20 btn-sm btn-lightred">Message</button>
            </div>

          </div>
          <!-- /tile widget -->

          <!-- tile body -->
          <div class="tile-body text-center bg-blue p-0">

            <ul class="list-inline tbox m-0">
              <li class="tcol p-10">
                <h2 class="m-0">695</h2>
                <span class="text-transparent-white">Tweets</span>
              </li>
              <li class="tcol bg-blue dker p-10">
                <h2 class="m-0">1 269</h2>
                <span class="text-transparent-white">Followers</span>
              </li>
              <li class="tcol p-10">
                <h2 class="m-0">369</h2>
                <span class="text-transparent-white">Following</span>
              </li>
            </ul>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile header -->
          <div class="tile-header">
            <h1 class="custom-font"><strong>About</strong> Me</h1>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <p>
              <a href="#" class="icon icon-info icon-ef-3 icon-ef-3b icon-color"><i class="fa fa-twitter"></i></a>
              <a href="#" class="icon icon-primary icon-ef-3 icon-ef-3b icon-color"><i class="fa fa-facebook"></i></a>
              <a href="#" class="icon icon-lightred icon-ef-3 icon-ef-3b icon-color"><i class="fa fa-google-plus"></i></a>
              <a href="#" class="icon icon-hotpink icon-ef-3 icon-ef-3b icon-color"><i class="fa fa-dribbble"></i></a>
            </p>

            <p class="text-default lt">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile header -->
          <div class="tile-header">
            <h1 class="custom-font"><strong>Friend</strong> List</h1>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <div class="media ">
              <div class="pull-left thumb">
                <img class="media-object img-circle" src="images/random-avatar5.fa128f71.jpg" alt="">
              </div>
              <div class="pull-right mt-10">
                <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
              </div>
              <div class="media-body">
                <p class="media-heading mb-0 mt-10">Roger <strong>Flopple</strong></p>
                <small class="text-lightred">Manager</small>
              </div>
            </div>

            <hr/>

            <div class="media">
              <div class="pull-left thumb">
                <img class="media-object img-circle" src="images/random-avatar4.2da0de16.jpg" alt="">
              </div>
              <div class="pull-right mt-10">
                <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
              </div>
              <div class="media-body">
                <p class="media-heading mb-0 mt-10">Deel <strong>McApple</strong></p>
                <small class="text-lightred">Print master</small>
              </div>
            </div>

            <hr/>

            <div class="media ">
              <div class="pull-left thumb">
                <img class="media-object img-circle" src="images/random-avatar8.aa2e7ab8.jpg" alt="">
              </div>
              <div class="pull-right mt-10">
                <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
              </div>
              <div class="media-body">
                <p class="media-heading mb-0 mt-10">Anna <strong>Opichia</strong></p>
                <small class="text-lightred">lead designer</small>
              </div>
            </div>

            <hr/>

            <div class="media ">
              <div class="pull-left thumb">
                <img class="media-object img-circle" src="images/random-avatar7.878bc2ec.jpg" alt="">
              </div>
              <div class="pull-right mt-10">
                <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-times"></i></button>
                <button type="button" class="btn btn-rounded-20 btn-default btn-sm mr-5" style="width:30px;"><i class="fa fa-pencil"></i></button>
                <button type="button" class="btn btn-rounded-20 btn-default btn-sm" style="width:30px;"><i class="fa fa-eye" style="margin-left: -2px;"></i></button>
              </div>
              <div class="media-body">
                <p class="media-heading mb-0 mt-10">Bobby <strong>Socks</strong></p>
                <small class="text-lightred">CEO</small>
              </div>
            </div>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile header -->
          <div class="tile-header">
            <h1 class="custom-font"><strong>My</strong> Projects</h1>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <ul class="list-unstyled">

              <li>
                <div class="row">
                  <div class="col-md-3">
                    Minimal
                  </div>
                  <div class="col-md-9">
                    <uib-progressbar class="progress-striped not-rounded" value="56" type="warning">56%</uib-progressbar>
                  </div>
                </div>
              </li>

              <li>
                <div class="row">
                  <div class="col-md-3">
                    Minoral
                  </div>
                  <div class="col-md-9">
                    <uib-progressbar class="progress-striped not-rounded" value="90" type="blue">90%</uib-progressbar>
                  </div>
                </div>
              </li>

              <li>
                <div class="row">
                  <div class="col-md-3">
                    The Kamarel
                  </div>
                  <div class="col-md-9">
                    <uib-progressbar class="progress-striped not-rounded" value="36" type="greensea">36%</uib-progressbar>
                  </div>
                </div>
              </li>

              <li>
                <div class="row">
                  <div class="col-md-3">
                    Themeforest
                  </div>
                  <div class="col-md-9">
                    <uib-progressbar class="progress-striped not-rounded" value="8" type="danger">8%</uib-progressbar>
                  </div>
                </div>
              </li>


            </ul>


          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


      </div>
      <!-- /col -->






      <!-- col -->
      <div class="col-md-8">

        <!-- tile -->
        <section class="tile tile-simple">

          <!-- tile body -->
          <div class="tile-body p-0">

            <uib-tabset class="tabs-dark">

              <uib-tab heading="Feed">
                <div class="wrap-reset">

                  <div class="streamline-form">
                    <textarea class="form-control br-0 br-2-t" placeholder="What's up dude?" rows="5"></textarea>
                    <div class="post-toolbar">
                      <a href="#" uib-tooltip="Add File"><i class="fa fa-paperclip"></i></a>
                      <a href="#" uib-tooltip="Add Image"><i class="fa fa-camera"></i></a>
                      <a href="#" class="pull-right" uib-tooltip="Post it!"><i class="fa fa-share"></i></a>
                    </div>
                  </div>

                  <div class="streamline mt-20">

                    <article class="streamline-post">

                      <aside>
                        <div class="thumb thumb-sm">
                          <img class="img-circle" src="images/profile-photo.106f5df1.jpg" alt="">
                        </div>
                      </aside>

                      <div class="post-container">

                        <div class="panel panel-default">
                          <div class="panel-heading bg-white">
                            John Douey <small class="text-muted">posted a new status</small>
                            <span class="text-muted pull-right"><i class="fa fa-clock-o mr-5"></i> Just now</span>
                          </div>
                          <div class="panel-body">
                            On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

                            <p class="mt-10 mb-0">
                              <a href="" active-toggle="" class="btn btn-default btn-xs active">
                                <i class="fa fa-heart-o text-inactive"></i><i class="fa fa-heart text-danger text-active"></i> Like (14)
                              </a>
                              <a href="" class="btn btn-default btn-xs">
                                <i class="fa fa-comments"></i> Comments (30)
                              </a>
                              <a href="" class="btn btn-default btn-xs">
                                <i class="fa fa-mail-reply"></i> Reply
                              </a>
                            </p>
                          </div>
                        </div>

                        <ul class="list-unstyled post-replies">

                          <li>

                            <aside>
                              <div class="thumb thumb-sm">
                                <img class="img-circle" src="images/random-avatar4.2da0de16.jpg" alt="">
                              </div>
                            </aside>

                            <div class="reply-container">
                              <div class="panel panel-default">
                                <div class="panel-body">
                                  <p>
                                    <strong>James Bend</strong>
                                    <span class="text-muted pull-right"><i class="fa fa-clock-o mr-5"></i> 6 minutes ago</span>
                                  </p>

                                  <p class="mb-0 text-small">These cases are perfectly simple and easy to distinguish.</p>

                                  <p class="mt-10 mb-0">
                                    <a href="" active-toggle="" class="btn btn-default btn-xs">
                                      <i class="fa fa-heart-o text-inactive"></i><i class="fa fa-heart text-danger text-active"></i> Like (5)
                                    </a>
                                    <a href="" class="btn btn-default btn-xs">
                                      <i class="fa fa-mail-reply"></i> Reply
                                    </a>
                                  </p>

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

                          </li>

                          <li>

                            <aside>
                              <div class="thumb thumb-sm">
                                <img class="img-circle" src="images/ici-avatar.c6a5ded8.jpg" alt="">
                              </div>
                            </aside>

                            <div class="reply-container">
                              <div class="panel panel-default">
                                <div class="panel-body">
                                  <p>
                                    <strong>Ing. Imrich Kamarel</strong>
                                    <span class="text-muted pull-right"><i class="fa fa-clock-o mr-5"></i> 50 minutes ago</span>
                                  </p>

                                  <p class="mb-0 text-small">In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best.</p>

                                  <p class="mt-10 mb-0">
                                    <a href="" active-toggle="" class="btn btn-default btn-xs active">
                                      <i class="fa fa-heart-o text-inactive"></i><i class="fa fa-heart text-danger text-active"></i> Like
                                    </a>
                                    <a href="" class="btn btn-default btn-xs">
                                      <i class="fa fa-mail-reply"></i> Reply
                                    </a>
                                  </p>

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

                          </li>

                          <li>

                            <aside>
                              <div class="thumb thumb-sm">
                                <img class="img-circle" src="images/arnold-avatar.1df41c32.jpg" alt="">
                              </div>
                            </aside>

                            <div class="reply-container">
                              <div class="panel panel-default">
                                <div class="panel-body">
                                  <p>
                                    <strong>Arnold Karlsberg</strong>
                                    <span class="text-muted pull-right"><i class="fa fa-clock-o mr-5"></i> 56 minutes ago</span>
                                  </p>

                                  <p class="mb-0 text-small">But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.</p>

                                  <p class="mt-10 mb-0">
                                    <a href="" active-toggle="" class="btn btn-default btn-xs">
                                      <i class="fa fa-heart-o text-inactive"></i><i class="fa fa-heart text-danger text-active"></i> Like (2)
                                    </a>
                                    <a href="" class="btn btn-default btn-xs">
                                      <i class="fa fa-mail-reply"></i> Reply
                                    </a>
                                  </p>

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

                          </li>

                        </ul>

                      </div>

                    </article>

                    <article class="streamline-post">
                      <aside>
                        <div class="thumb thumb-sm">
                          <img class="img-circle" src="images/random-avatar1.7dd877de.jpg" alt="">
                        </div>
                      </aside>
                      <div class="post-container">
                        <div class="panel panel-default">
                          <div class="panel-heading bg-white">
                            Mike Herrington <small class="text-muted">posted a new status</small>
                            <span class="text-muted pull-right"><i class="fa fa-clock-o mr-5"></i> 39 minutes ago</span>
                          </div>
                          <div class="panel-body">
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

                            <p class="mt-10 mb-0">
                              <a href="" active-toggle="" class="btn btn-default btn-xs">
                                <i class="fa fa-heart-o text-inactive"></i><i class="fa fa-heart text-danger text-active"></i> Like
                              </a>
                              <a href="" class="btn btn-default btn-xs">
                                <i class="fa fa-comments"></i> Comments (9)
                              </a>
                              <a href="" class="btn btn-default btn-xs">
                                <i class="fa fa-mail-reply"></i> Reply
                              </a>
                            </p>

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

                    <article class="streamline-post">
                      <aside>
                        <div class="thumb thumb-sm">
                          <img class="img-circle" src="images/random-avatar3.85ee4bda.jpg" alt="">
                        </div>
                      </aside>
                      <div class="post-container">
                        <div class="panel panel-default">
                          <div class="panel-heading bg-white">
                            Robin Wills <small class="text-muted">added a new photo</small>
                            <span class="text-muted pull-right"><i class="fa fa-clock-o mr-5"></i> 1 hour ago</span>
                          </div>
                          <div class="panel-body">

                            <img src="http://placekitten.com/g/800/600" class="img-responsive mb-20" alt />

                            <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>

                            <p class="mt-10 mb-0">
                              <a href="" active-toggle="" class="btn btn-default btn-xs active">
                                <i class="fa fa-heart-o text-inactive"></i><i class="fa fa-heart text-danger text-active"></i> Like (16)
                              </a>
                              <a href="" class="btn btn-default btn-xs">
                                <i class="fa fa-comments"></i> Comments (16)
                              </a>
                              <a href="" class="btn btn-default btn-xs">
                                <i class="fa fa-mail-reply"></i> Reply
                              </a>
                            </p>
                          </div>
                        </div>
                      </div>
                    </article>

                    <div class="text-center">
                      <a href="#" class="btn btn-sm btn-default">
                        Load More …
                      </a>
                    </div>

                  </div>

                </div>
              </uib-tab>

              <uib-tab heading="Settings">
                <div class="wrap-reset">

                  <form class="profile-settings">

                    <div class="row">
                      <div class="form-group col-md-12 legend">
                        <h4><strong>Personal</strong> Settings</h4>
                        <p>Your personal account settings</p>
                      </div>
                    </div>

                    <div class="row">

                      <div class="form-group col-sm-6">
                        <label for="first-name">First Name</label>
                        <input type="text" class="form-control" id="first-name" value="John">
                      </div>

                      <div class="form-group col-sm-6">
                        <label for="last-name">Last Name</label>
                        <input type="text" class="form-control" id="last-name" value="Douey">
                      </div>

                    </div>

                    <div class="row">

                      <div class="form-group col-sm-6">
                        <label for="address1">Address Line 1</label>
                        <input type="text" class="form-control" id="address1" value="Vajnorska 215">
                      </div>

                      <div class="form-group col-sm-6">
                        <label for="address2">Address Line 2</label>
                        <input type="text" class="form-control" id="address2" value="IBM Tower, floor #32">
                      </div>

                    </div>

                    <div class="row">

                      <div class="form-group col-sm-4">
                        <label for="city">City</label>
                        <input type="text" class="form-control" id="city" value="Bratislava">
                      </div>

                      <div class="form-group col-sm-4">
                        <label for="state">State/Provice</label>
                        <input type="text" class="form-control" id="state" value="Bratislava">
                      </div>

                      <div class="form-group col-sm-4">
                        <label for="zip">Zip Code</label>
                        <input type="text" class="form-control" id="zip" value="215 62">
                      </div>

                    </div>

                    <div class="row">

                      <div class="form-group col-sm-6">
                        <label for="email">E-mail</label>
                        <input type="email" class="form-control" id="email" value="johny.d@tattek.com" readonly>
                      </div>

                      <div class="form-group col-sm-6">
                        <label for="country">Country</label>
                        <select ui-jq="chosen" id="country" ui-options="{width: '100%'}">
                          <option>Slovakia</option>
                          <option>Czech Republic</option>
                          <option>Poland</option>
                          <option>Hungary</option>
                          <option>Austria</option>
                        </select>
                      </div>

                    </div>

                    <div class="row">

                      <div class="form-group col-sm-6">
                        <label for="phone">Phone</label>
                        <input type="text" class="form-control" id="phone" value="+(421) 903 669 478">
                        <span class="help-block">+(421) 999 999 999</span>
                      </div>

                      <div class="form-group col-sm-6">
                        <label for="avatar">Avatar</label>
                        <input ui-jq="filestyle" type="file" class="filestyle" ui-options="{
                          buttonText: 'Find file',
                          iconName: 'fa fa-inbox'
                        }" id="avatar">
                        <span class="help-block">Allowed files: gif, png, jpg. Max file size 1Mb</span>
                      </div>

                    </div>

                    <div class="row">

                      <div class="form-group col-sm-6">
                        <label for="website">Website</label>
                        <input type="text" class="form-control" id="website" value="http://tattek.com/minimal">
                      </div>

                      <div class="form-group col-sm-6">
                        <label for="bio">Bio</label>
                        <textarea class="form-control" id="bio" rows="4">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was</textarea>
                      </div>

                    </div>

                    <div class="row">
                      <div class="form-group col-md-12 legend">
                        <h4><strong>Social</strong> Settings</h4>
                        <p>Connect with your social profiles</p>
                      </div>
                    </div>

                    <div class="row">

                      <div class="form-group col-sm-6">
                        <label for="facebook">Facebook</label>
                        <input type="text" class="form-control" id="facebook">
                      </div>

                      <div class="form-group col-sm-6">
                        <label for="google-plus">Google+</label>
                        <input type="text" class="form-control" id="google-plus">
                      </div>

                    </div>

                    <div class="row">

                      <div class="form-group col-sm-6">
                        <label for="pinterest">Pinterest</label>
                        <input type="text" class="form-control" id="pinterest">
                      </div>

                      <div class="form-group col-sm-6">
                        <label for="flickr">Flickr</label>
                        <input type="text" class="form-control" id="flickr">
                      </div>

                    </div>

                    <div class="row">

                      <div class="form-group col-sm-6">
                        <label for="dribbble">Dribbble</label>
                        <input type="text" class="form-control" id="dribbble">
                      </div>

                      <div class="form-group col-sm-6">
                        <label for="github">GitHub</label>
                        <input type="text" class="form-control" id="github">
                      </div>

                    </div>

                    <div class="row">
                      <div class="form-group col-md-12 legend">
                        <h4><strong>Security</strong> Settings</h4>
                        <p>Secure your account</p>
                      </div>
                    </div>

                    <div class="row">

                      <div class="form-group col-sm-6">
                        <label for="username">Username</label>
                        <input type="text" class="form-control" id="username" value="Johny.d" readonly>
                      </div>


                      <div class="form-group col-sm-6">
                        <label for="password">Current Password</label>
                        <input type="password" class="form-control" id="password" value="secretpassword" readonly>
                      </div>

                    </div>

                    <div class="row">

                      <div class="form-group col-sm-6">
                        <label for="new-password">New Password</label>
                        <input type="password" class="form-control" id="new-password">
                      </div>

                      <div class="form-group col-sm-6">
                        <label for="new-password-repeat">New Password Repeat</label>
                        <input type="password" class="form-control" id="new-password-repeat">
                      </div>

                    </div>

                    <div class="row">

                      <div class="form-group col-sm-6">
                        <label>Profile Visibility:</label>
                        <label class="checkbox checkbox-custom">
                          <input name="optionsRadios" type="radio" checked=""><i></i> For Everyone
                        </label>
                        <label class="checkbox checkbox-custom">
                          <input name="optionsRadios" type="radio"><i></i> For Friends
                        </label>
                        <label class="checkbox checkbox-custom">
                          <input name="optionsRadios" type="radio"><i></i> Hidden for Everyone
                        </label>
                      </div>

                      <div class="form-group col-sm-6">
                        <label>Notifications:</label>
                        <label class="checkbox checkbox-custom">
                          <input type="checkbox" checked=""><i></i> New task notifications
                        </label>
                        <label class="checkbox checkbox-custom">
                          <input type="checkbox" checked=""><i></i> New friend request notifications
                        </label>
                        <label class="checkbox checkbox-custom">
                          <input type="checkbox"><i></i> New message nofifications
                        </label>
                      </div>

                    </div>

                  </form>

                </div>
              </uib-tab>



            </uib-tabset>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->











    </div>
    <!-- /row -->



  </div>
  <!-- /page content -->




</div>
