<?php include 'inc/config.php'; $template['header_link'] = 'CONTACTS'; ?>
<?php include 'inc/template_start.php'; ?>
<?php include 'inc/page_head.php'; ?>

<!-- Page content -->
<div id="page-content">
    <!-- Contacts Header -->
    <div class="content-header">
        <div class="row">
            <div class="col-sm-6">
                <div class="header-section">
                    <h1>Contacts</h1>
                </div>
            </div>
            <div class="col-sm-6 hidden-xs">
                <div class="header-section">
                    <ul class="breadcrumb breadcrumb-top">
                        <li>Extra Pages</li>
                        <li><a href="">Contacts</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="text-center border-top push-inner-top-bottom">
            <a href="#modal-add-contact" class="btn btn-sm btn-success" data-toggle="modal"><i class="fa fa-plus"></i></a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">A</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">B</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">C</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">D</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">E</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">F</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">G</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">H</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">I</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">J</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">K</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">L</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">M</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">N</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">O</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">P</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">Q</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">R</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">S</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">T</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">V</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">U</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">W</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">X</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">Y</a>
            <a href="javascript:void(0)" class="btn btn-sm btn-default">Z</a>
        </div>
    </div>
    <!-- END Contacts Header -->

    <!-- Contacts Content -->
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar9.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Jeremy Doe</strong></h3>
                    <span class="text-muted">Copywriter</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar8.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Jacob Hunt</strong></h3>
                    <span class="text-muted">Designer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar7.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Bryan Bailey</strong></h3>
                    <span class="text-muted">Graphic Designer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar6.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Alice Howard</strong></h3>
                    <span class="text-muted">Icon Designer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar5.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Ryan Murphy</strong></h3>
                    <span class="text-muted">Logo Designer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar4.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>James West</strong></h3>
                    <span class="text-muted">Developer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar2.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Samuel Cruz</strong></h3>
                    <span class="text-muted">Designer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar3.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Harry Parker</strong></h3>
                    <span class="text-muted">Copywriter</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar14.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Mark Reynolds</strong></h3>
                    <span class="text-muted">Manager</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar12.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Emma Hart</strong></h3>
                    <span class="text-muted">Manager</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar15.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>John Doe</strong></h3>
                    <span class="text-muted">Support</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar16.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Kyle Fisher</strong></h3>
                    <span class="text-muted">Developer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar15.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Ronald Hill</strong></h3>
                    <span class="text-muted">Designer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar14.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Kevin Ruiz</strong></h3>
                    <span class="text-muted">Web Designer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar13.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Carol Ellis</strong></h3>
                    <span class="text-muted">Photographer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar1.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Carl Gordon</strong></h3>
                    <span class="text-muted">Web Developer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar2.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Jose Miller</strong></h3>
                    <span class="text-muted">Photographer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar3.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Roger West</strong></h3>
                    <span class="text-muted">Designer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar4.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Justin Ruiz</strong></h3>
                    <span class="text-muted">Copywriter</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar5.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Kyle Moreno</strong></h3>
                    <span class="text-muted">Full Stack Dev</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar6.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Ann Gilbert</strong></h3>
                    <span class="text-muted">Web Designer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar7.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Roy Lewis</strong></h3>
                    <span class="text-muted">Full Stack Dev</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar8.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Jesse Ross</strong></h3>
                    <span class="text-muted">Backend Dev</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar16.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Daniel Hicks</strong></h3>
                    <span class="text-muted">Web Designer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar12.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Donna Chen</strong></h3>
                    <span class="text-muted">Web Developer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar10.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Doris Mills</strong></h3>
                    <span class="text-muted">Web Designer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar2.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Juan Parker</strong></h3>
                    <span class="text-muted">Photographer</span>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <a href="javascript:void(0)" class="widget">
                <div class="widget-content text-right clearfix">
                    <img src="img/placeholders/avatars/avatar3.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar pull-left">
                    <h3 class="widget-heading h4"><strong>Roy Holland</strong></h3>
                    <span class="text-muted">Web Designer</span>
                </div>
            </a>
        </div>
    </div>
    <!-- END Contacts Content -->
</div>
<!-- END Page Content -->

<?php include 'inc/page_footer.php'; ?>

<!-- Add Contact Modal -->
<div id="modal-add-contact" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title"><i class="fa fa-plus"></i> <strong>New Contact</strong></h3>
            </div>
            <div class="modal-body">
                <form action="page_ready_contacts.php" method="post" class="form-horizontal form-bordered" onsubmit="return false;">
                    <div class="form-group">
                        <label class="col-xs-3 control-label text-muted">NO AVATAR</label>
                        <div class="col-xs-9">
                            <i class="fa fa-fw fa-upload"></i> <a href="javascript:void(0)">Upload New Avatar</a><br>
                            <i class="fa fa-fw fa-picture-o"></i> <a href="javascript:void(0)">Choose from Library</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="add-contact-name">Name</label>
                        <div class="col-xs-9">
                            <input type="text" id="add-contact-name" name="add-contact-name" class="form-control" placeholder="Enter Full Name..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="add-contact-email">Email</label>
                        <div class="col-xs-9">
                            <input type="email" id="add-contact-email" name="add-contact-email" class="form-control" placeholder="Enter Email..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="add-contact-phone">Phone</label>
                        <div class="col-xs-9">
                            <input type="text" id="add-contact-phone" name="add-contact-phone" class="form-control" placeholder="(000) 000-0000">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="add-contact-mobile">Mobile</label>
                        <div class="col-xs-9">
                            <input type="text" id="add-contact-mobile" name="add-contact-mobile" class="form-control" placeholder="Enter Mobile Number..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="add-contact-address">Address</label>
                        <div class="col-xs-9">
                            <input type="text" id="add-contact-address" name="edit-contact-address" class="form-control" placeholder="Enter Address..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="add-contact-group">Group</label>
                        <div class="col-xs-9">
                            <input type="text" id="add-contact-group" name="add-contact-group" class="input-tags" value="All Contacts">
                        </div>
                    </div>
                    <div class="form-group form-actions">
                        <div class="col-xs-12 text-right">
                            <button type="submit" class="btn btn-effect-ripple btn-success">Add</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- END Add Contact Modal -->

<?php include 'inc/template_scripts.php'; ?>
<?php include 'inc/template_end.php'; ?>