<div class="row page-margin" data-page="group" data-id="<?php echo $wo['group_profile']['id'];?>">
  <div class="profile-container">
     <div class="profile-top-line"></div>
      <div class="card hovercard">
        <div class="cardheader user-cover">
          <?php if(Wo_IsGroupOnwer($wo['group_profile']['id']) === true) { ?>
          <form action="#" method="post" class="profile-cover-changer">
            <div class="input-group">
              <span class="input-group-btn">
              <span class="btn btn-upload-image btn-file">
              <i class="fa fa-camera"></i>
              <input type="file" name="cover" accept="image/x-png, image/jpeg" onchange="Wo_UpdateProfileCover();">
              </span>
              </span>
            </div>
            <input type="hidden" name="group_id" id="group-id" value="<?php echo $wo['group_profile']['id'];?>">
          </form>
          <?php } ?>
          <div class="user-cover-uploading-container"></div>
          <div class="user-cover-uploading-progress">
              <i class="fa fa-spinner fa-spin progress-icon" data-icon="spin"></i>
          </div>
          <img id="cover-image" src="<?php echo $wo['group_profile']['cover']?>" alt="<?php echo $wo['group_profile']['name']?> Cover Image"/>
        </div>
        <div class="user-avatar flip">
          <div class="user-avatar-uploading-container">
            <div class="user-avatar-uploading-progress">
              <i class="fa fa-spinner fa-spin progress-icon" data-icon="spin"></i>
            </div>
          </div>
          <img id="group-avatar-image" alt="<?php echo $wo['group_profile']['name']?> Profile Picture" src="<?php echo $wo['group_profile']['avatar']?>"/>
          <?php if(Wo_IsGroupOnwer($wo['group_profile']['id']) === true) { ?>
          <form action="#" method="post" class="profile-avatar-changer">
            <div class="input-group">
              <span class="input-group-btn">
              <span class="btn btn-upload-image btn-file">
              <i class="fa fa-camera"></i>
              <input type="file" name="avatar" accept="image/x-png, image/jpeg" onchange="Wo_UpdateProfileAvatar();">
              </span>
              </span>
            </div>
            <input type="hidden" name="group_id" id="group-id" value="<?php echo $wo['group_profile']['id'];?>">
          </form>
          <?php } ?>
        </div>
        <div class="text-shadow"></div>
        <div class="info">
          <div class="title">
            <a href="<?php echo Wo_SeoLink('index.php?tab1=group&g=' . $wo['group_profile']['group_name'] . '');?>">
            <?php echo $wo['group_profile']['name']; ?>
            </a>
          </div>
          <div class="options-buttons <?php echo Wo_RightToLeft('pull-left');?> ">
            <span class="user-follow-button group-join-btn">
            <?php echo Wo_GetJoinButton($wo['group_profile']['id']);?>
            </span>
          </div>
        </div>
      </div>
    </div>
  <div class="col-md-8">
             <?php
            if (isset($_GET['type'])) {
              if ($_GET['type'] == 'members') {
            ?>
        <div class="list-group profile-lists">
         <div class="list-group-item"><i class="fa fa-fw fa-users"></i> <?php echo $wo['lang']['members'];?></div>
            <div class="setting-well">
            <?php
               if (Wo_CountGroupMembers($wo['group_profile']['id']) == 0) {
                  echo '<h5 class="search-filter-center-text">' . $wo['lang']['no_members_found'] . '</h5>';
                } else {
                foreach (Wo_GetGroupMembers($wo['group_profile']['id']) as $wo['UsersList']) {
                  echo Wo_LoadPage('timeline/follow-list');
               }
              }
             ?>
            </div>
            <div class="clear"></div>
        </div>
    <?php } else if ($_GET['type'] == 'add_members') {
      ?>
        <div class="list-group profile-lists">
         <div class="list-group-item"><i class="fa fa-fw fa-user-plus"></i> <?php echo $wo['lang']['add_your_frineds'];?></div>
            <div class="setting-well">
            <?php
               if (Wo_CountGroupsNotMember($wo['group_profile']['id']) == 0) {
                  echo '<h5 class="search-filter-center-text">' . $wo['lang']['added_all_friends'] . '</h5>';
                } else {
                foreach (Wo_GetGroupsNotMember($wo['group_profile']['id']) as $wo['UsersList']) {
                  echo Wo_LoadPage('group/add-list');
               }
              }
             ?>
            </div>
            <div class="clear"></div>
        </div>
     <?php } } else { ?>
    <?php echo Wo_GetGroupPostPublisherBox($wo['group_profile']['id']); ?>
    <?php if (Wo_IsLogged() === true) { echo Wo_LoadPage('story/filter-by'); } ?>
    <div id="posts" data-story-group="<?php echo $wo['group_profile']['id'];?>">
      <div class="pinned-post-container">
        <?php
          $pinedstory = Wo_GetPinnedPost($wo['group_profile']['id'], 'group');
          if (count($pinedstory) == 1) {
              foreach ($pinedstory  as $wo['story']) {
                echo Wo_LoadPage('story/content');
              }
          }
          ?>
      </div>
      <?php
        $stories = Wo_GetPosts(array('filter_by' => 'all', 'group_id' => $wo['group_profile']['id'])); 
        if (count($stories) == 0 && count($pinedstory) == 0) {
           echo Wo_LoadPage('story/group-no-stories');
        } else {
           foreach ($stories as $wo['story']) {
             echo Wo_LoadPage('story/content');
           }
        }
        ?>
    </div>
    <?php if (Wo_IsLogged() === true && count($stories) > 0) {  ?>
    <div class="load-more pointer" id="load-more-posts" onclick="Wo_GetMorePosts();">
      <span class="btn btn-default"><i class="fa fa-chevron-circle-down progress-icon" data-icon="chevron-circle-down"></i> <?php echo $wo['lang']['load_more_posts']; ?><span>
    </div>
    <?php
      }
      }
      ?>
    <div id="load-more-filter">
      <span class="filter-by-more hidden" data-filter-by="all"></span>
    </div>
  </div>
  <div class="col-md-4">
    <ul class="list-group">
      <?php 
      $group_privacy = $wo['lang']['public'];
      $group_icon = 'globe';
      if ($wo['group_profile']['privacy'] == 2) {
         $group_privacy = $wo['lang']['private'];
         $group_icon = 'lock';
      }
      ?>
       <li class="list-group-item" style="background-color: #fff;border-bottom:0;  position: relative; display: block; padding: 5px 10px;font-size: 13px;background-color: #fff;color: #555">
          <strong><i class="fa fa-users fa-fw"></i></strong> <a href="<?php echo Wo_SeoLink('index.php?tab1=timeline&u=' . $wo['group_profile']['group_name'] . '&type=members');?>"><?php echo Wo_CountGroupMembers($wo['group_profile']['id']);?> <?php echo $wo['lang']['members'];?></a>
          <?php if (Wo_IsGroupOnwer($wo['group_profile']['id'])) { ?>
          <span class="green">+<?php echo Wo_CountJoinedThisWeek($wo['group_profile']['id']); ?> <?php echo $wo['lang']['this_week']; ?></span>
          <?php } ?>
      </li>
       <li class="list-group-item">
        <strong><i class="fa fa-<?php echo $group_icon; ?> fa-fw" data-toggle="tooltip" ></i></strong>
        <?php echo $group_privacy; ?>
      </li>
      <li class="list-group-item">
        <strong><i class="fa fa-bars fa-fw" data-toggle="tooltip" title="<?php echo $wo['lang']['category']; ?>"></i></strong>
        <?php echo $wo['group_profile']['category']; ?>
      </li>
      <li class="list-group-item">
        <strong><i class="fa fa-pencil-square-o fa-fw"></i></strong> <?php echo Wo_CountGroupPosts($wo['group_profile']['id']);?> <?php echo $wo['lang']['posts']; ?>
      </li>
      <?php if (Wo_IsLogged() === true) { ?>
      <?php if (Wo_IsGroupJoined($wo['group_profile']['id']) === true) { ?>
      <li class="list-group-item">
        <strong><i class="fa fa-user-plus fa-fw"></i></strong> <a href="<?php echo Wo_SeoLink('index.php?tab1=timeline&u=' . $wo['group_profile']['group_name'] . '&type=add_members');?>"><?php echo $wo['lang']['add_your_frineds']; ?></a>
      </li>
      <?php } } ?>
    </ul>
    <?php if(!empty($wo['group_profile']['about'])) {  ?>
    <ul class="list-group">
      <li class="list-group-item text-muted" contenteditable="false"><i class="fa fa-exclamation fa-fw"></i> <?php echo $wo['lang']['about']; ?></li>
      <li class="list-group-item text-muted" contenteditable="false"><?php echo $wo['group_profile']['about']; ?></li>
    </ul>
    <?php } ?>
    <?php if(Wo_IsLogged() === true) {  ?>
    <ul class="list-group">
      <li class="list-group-item text-muted search-for-posts-container" contenteditable="false"><i class="fa fa-search progress-icon fa-fw" data-icon="search"></i> <?php echo $wo['lang']['search_for_posts']; ?>
      </li>
      <li class="list-group-item">
        <input type="text" class="form-control search-for-posts" onkeyup="Wo_SearchForPosts(this.value);">
      </li>
    </ul>
    <?php
      $groups = Wo_GroupSug(5);
      if (count($groups) > 0) {
      ?>
      <ul class="list-group" id="sidebar-group-list-container">
         <li class="list-group-item text-muted" contenteditable="false">
            <i class="fa fa-users fa-fw"></i> <?php echo $wo['lang']['suggested_groups'];?> <span onclick="Wo_ReloadSideBarGroups();" class="<?php echo Wo_RightToLeft('pull-right');?>  refresh">
            <i class="fa fa-repeat progress-icon" data-icon="repeat"></i>
            </span>
         </li>
         <div class="sidebar-group-may-know-container">
            <?php 
            foreach ($groups as $wo['GroupList']) {
                $wo['GroupList']['name'] = substr($wo['GroupList']['name'],0,20);
                echo Wo_LoadPage('sidebar/sidebar-group-list');
            } 
            ?>
         </div>
         <div class="clear"></div>
      </ul>
      <?php } ?>
    <?php } ?>
    <?php 
      $sidebar_ad = Wo_GetAd('sidebar', false);
      if (!empty($sidebar_ad)) {?>
    <ul class="list-group sidebar-ad">
      <?php echo $sidebar_ad; ?>
    </ul>
    <?php } ?>
  </div>
</div>
<!-- JS Pages functions -->
<script>
$(function () {
  if($(window).width() > 600) {
    $(".user-avatar").hover(function () {
      $('.profile-avatar-changer').fadeIn(100);
    }, function () {
      $('.profile-avatar-changer').fadeOut(100);
    });
  }
  if($(window).width() > 600) {
    $(".user-cover").hover(function () {
      $('.profile-cover-changer').fadeIn(100);
    }, function () {
      $('.profile-cover-changer').fadeOut(100);
    });
  }
  $('form.profile-avatar-changer').ajaxForm({
    url: Wo_Ajax_Requests_File() + '?f=update_group_avatar_picture',

    beforeSend: function () {
      $('.user-avatar-uploading-container,.user-avatar-uploading-progress').fadeIn(200);
    },
    success: function (data) {
      if(data.status == 200) {
        $('[id^=group-avatar-image]').attr("src", data.img);
      }
      $('.user-avatar-uploading-container, .user-avatar-uploading-progress').fadeOut(200);
    }
  });

  $('form.profile-cover-changer').ajaxForm({
    url: Wo_Ajax_Requests_File() + '?f=update_group_cover_picture',

    beforeSend: function () {
      $('.user-cover-uploading-container,.user-cover-uploading-progress').fadeIn(200);
    },
    success: function (data) {
      if(data.status == 200) {
        $('[id^=cover-image]').attr("src", data.img);
      }
      $('.user-cover-uploading-container,.user-cover-uploading-progress').fadeOut(200);
    }
  });
});

function Wo_UpdateProfileAvatar() {
  $("form.profile-avatar-changer").submit();
}

function Wo_UpdateProfileCover() {
  $("form.profile-cover-changer").submit();
}
</script>