<?php
if (isset($post_images) && (!empty($post_images))) {
    $gallery_images = $post_images;
} elseif (isset($profile_images) && (!empty($profile_images))) {
    $gallery_images = $profile_images;
}
?>

<input id="baseUrl" type="hidden" value="<?php echo base_url() ?>">
<div class="col-sm-8">
    <div class="row ">
        <div class="col-sm-12 ">
            <div class="col-sm-12 form-group sliderImageContainer">

                <!--                <div style="position: absolute;z-index: 9;right: 50px;top: 5px;font-size:16px">
                                    <a href="#"  data-toggle="modal" data-target="#EditImageVideoUploadModel" > <i class="fa fa-edit" aria-hidden="true"></i></a>
                                </div>-->

                <div class="galleryDeleteIcon">
                    <a id="deleteGalleryImage" href="javascript:void(0)"> <i class="fa fa-trash" aria-hidden="true"></i></a>
                </div>

                <?php
                if (isset($gallery_images)) {
                    ?>
                    <img id="SliderImage" src="<?php echo base_url('content-library/' . $this->session->person_url . '/' . $gallery_images[0]->image_location) ?>" class="img-responsive">   
                <?php } else { ?>
                    <img id="SliderImage" src="<?php echo base_url() ?>image/no_profile_picture.png" class="img-responsive" style="height: 350px;width: 100%">
                <?php } ?>

            </div>
            <div class="col-sm-12 form-group " >
                <div class="leftArrow">
                    <a id="leftArrow" href="javascript:void(0)"> <i class="fa fa-arrow-circle-left" aria-hidden="true"></i></a>
                </div>
                <div class="rightArrow">
                    <a id="rightArrow" href="javascript:void(0)"> <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
                </div>

                <div id="thumbDivContainer">
                    <?php
                    if (isset($gallery_images)) {
                        $id_counter = 1;
                        foreach ($gallery_images as $image) {
                            ?>
                            <div class="col-md-2 col-lg-2 col-sm-4 col-xs-4 thumbDiv" >
                                <img id="thumbImage<?php echo $id_counter; ?>" src="<?php echo base_url('content-library/' . $this->session->person_url . '/' . $image->image_location) ?>" class="img-responsive box-shadow">
                            </div>
                            <?php
                            $id_counter++;
                        }
                    } else {
                        ?>
                        <div class="col-sm-2 col-xs-2" style=";padding: 0 5px;">
                            <img id="defaultThumb" src="<?php echo base_url() ?>image/no_profile_picture.png" class="img-responsive box-shadow" style="height: 110px;width: 100%;">
                        </div>
                    <?php } ?>                    
                </div>
                
            </div>
        </div>
    </div>
    <div class="spaceMaker"></div>
</div>



<div id="EditImageVideoUploadModel" class="modal fade bs-example-modal-md" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-md">
        <div class="modal-content gray_ttc" >
            <div class="modal-header" style="padding: 10px 20px 5px 10px">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel" style="    font-size: 18px;font-weight: normal;color: #8899a6;text-align: center !important;">Edit photo</h4>
            </div>

            <div class="modal-body" style="background: #fff;padding-bottom: 0">
                <div class="row">
                    <div class="col-sm-12" style="margin-bottom: 15px;">
                        <div class="col-sm-12 padding-zero" style="border: 1px solid #80c12c">
                            <input id="ImageTitle" type="text" placeholder="This is Image title" class="form-control" style="max-width: 100%;border-bottom: 1px solid limegreen;border-top: none;border-left: none; border-right: none;display: none ">
                            <textarea  id="ImageDescription"  placeholder="This is Image Description" class="form-control" rows="3"  style="max-width: 100%;max-height: 90px;border-bottom: 1px solid limegreen;border-top: none;border-left: none; border-right: none; display: none "></textarea>
                            <input  id="ImageTag"  type="text" placeholder="This is Image tag" class="form-control" style="max-width: 100%;border-bottom: 1px solid limegreen;border-top: none;border-left: none; border-right: none;display: none  ">
                            <input  id="ImageLocation"  type="text" placeholder="This is Image Location" class="form-control" style="max-width: 100%;border-bottom: 1px solid limegreen;border-top: none;border-left: none; border-right: none; display: none ">

                            <div class="row" style="padding: 10px;height: 100%;" >

                                <div class="col-xs-6 col-sm-8 col-sm-offset-2">
                                    <a href="#" class="thumbnail" style="margin-bottom: 0px;border: none">
                                        <img src="<?php echo base_url() ?>image/no_profile_picture.png" alt="Image Title" class="img-rounded box-shadow">
                                    </a>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
                <div class="row" style="background: #F2F9EA">
                    <div class="col-sm-12" style="padding: 10px">

                        <div id="BtnUpdateTitle" class="col-sm-1 col-xs-3  form-group" title="Update Title">
                            <a href="#" class="btn btn-success"> <i class="fa  fa-pencil" aria-hidden="true"></i></a>
                        </div>
                        <div  id="BtnUpdateDescription" class="col-sm-1 col-xs-3  form-group" title="Update Description">
                            <a href="#" class="btn btn-success"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                        </div>
                        <div  id="BtnUpdateTags" class="col-sm-1 col-xs-3  form-group" title="Tags">
                            <a href="#" class="btn btn-success"> <i class="fa fa-tags" aria-hidden="true"></i></a>
                        </div>
                        <div  id="BtnUpdateLocation" class="col-sm-1 col-xs-3  form-group" title="Update Location">
                            <a href="#" class="btn btn-success"> <i class="fa fa-location-arrow" aria-hidden="true"></i></a>
                        </div>

                        <div class="col-sm-3  col-xs-12 pull-right  form-group">
                            <a href="#" class="btn btn-success"> Update</a>
                        </div>

                    </div>
                </div>

            </div><!-- /.modal-content -->
        </div>

    </div>
</div>
<script src="<?php echo base_url()?>front_end_resource/profile/image_album.js" type="text/javascript"></script>