#if($lg.classbanner || $lg.classimage)
      #set($banner = 	$mediaarchive.asLinkToPreview($lg.classbanner,'image1500x1500.png'))
      #set($featureimage = $mediaarchive.getAsset($lg.classimage))
	  #set($thumb = $mediaarchive.asLinkToPreview($lg.classimage, "image300x300.jpg") )
      
      
  
 #end


<div class="resume">
   
<div class="row">
  <div class="col-xs-12 col-sm-12  col-md-12  col-lg-12">
    <div class="card card-default shadow">
      <div class="card-header resume-heading">
        <div class="row">
          <div class="col-lg-12">
            <div class="col-xs-12 col-sm-4">
              <figure>
                <img class="img-thumbnail img-responsive" alt="" src="$thumb">
              </figure>
      
              
            </div>

            <div class="col-xs-12 col-sm-8">
              <ul class="list-group">
              #if($lg.tagline)
                <li class="list-group-item">$!lg.tagline</li>
                #end
                #if($lg.website)
                <li class="list-group-item"><a href="$!lg.website" target="_blank">Website</a></li>
                #end
                #if($lg.phone)
                <li class="list-group-item"><i class="fa fa-phone"></i> $!lg.phone </li>
                #end
                  #if($lg.contactname)
                <li class="list-group-item"><i class="fa fa-envelope"></i> $!lg.contactname</li>
                #end
                #if($lg.email)
                
                
                
                <li class="list-group-item"><i class="fa fa-envelope"></i><a href="mailto: $!lg.email"> &nbsp; $lg.email</a></li>
                #end
              </ul>
                <div class="well">
              $context.putPageValue("socialdata", $lg)
              $pages.include("$apphome/homepages/social.html", $context)
              </div>
          </div>
            </div>
          </div>
        </div>
      </div>
      #if($lg.shortdescription)
      <div class="bs-callout bs-callout-danger">
      
        <h4>About</h4>
        
        	
 #if($user.get("oe_edit_mode")== "editing")
		<a class="oe-dataedit" data-target="#edit-$lg.id"  href="#"><img src="/openedit/components/html/theme/images/htmledit.png"/></a>
	#end			       
	   
	<div class="oe-editable " id="edit-$lg.id" data-dataid="$lg.id" data-field="shortdescription" data-searchtype="learningGroup">$!lg.shortdescription</div>
  
  
       
      </div>
      #end
      #if($lg.keywords)
      <div class="bs-callout bs-callout-danger">
        <h4>Tags</h4>
       #foreach ($tag in $lg.keywords.split("\s*\|\s*"))
       
		<a class="badge badge-light" 
		href="$home$apphome/exhibithall/search.html?searchtype=learningGroup&field=$catalogid:asset/details:description&operation=matches&description.value=$tag">$tag</a>
		
		#end
      </div>
#end
      
      
    

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



<style type="text/css">

/* uses font awesome for social icons */
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);



/*social buttons*/
.btn-social{
  color: white;
  opacity:0.9;
}
.btn-social:hover {
  color: white;
    opacity:1;
}
.btn-facebook {
background-color: #3b5998;
opacity:0.9;
}
.btn-twitter {
background-color: #00aced;
opacity:0.9;
}
.btn-linkedin {
background-color:#0e76a8;
opacity:0.9;
}
.btn-github{
  background-color:#000000;
  opacity:0.9;
}
.btn-google {
  background-color: #c32f10;
  opacity: 0.9;
}
.btn-stackoverflow{
  background-color: #D38B28;
  opacity: 0.9;
}

/* resume stuff */

.bs-callout {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #eee;
    border-image: none;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px 1px 1px 5px;
    margin-bottom: 5px;
    padding: 20px;
}
.bs-callout:last-child {
    margin-bottom: 0px;
}
.bs-callout h4 {
    margin-bottom: 10px;
    margin-top: 0;
}

.bs-callout-danger {
    border-left-color: #d9534f;
}

.bs-callout-danger h4{
    color: #d9534f;
}

.resume .list-group-item:first-child, .resume .list-group-item:last-child{
  border-radius:0;
}

/*makes an anchor inactive(not clickable)*/
.inactive-link {
   pointer-events: none;
   cursor: default;
}

.resume-heading .social-btns{
  margin-top:15px;
}
.resume-heading .social-btns i.fa{
  margin-left:-5px;
}



@media (max-width: 992px) {
  .resume-heading .social-btn-holder{
    padding:5px;
  }
}


/* skill meter in resume. copy pasted from http://bootsnipp.com/snippets/featured/progress-bar-meter */

.progress-bar {
    text-align: left;
	white-space: nowrap;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.progress-bar > .progress-type {
	padding-left: 10px;
}

.progress-meter {
	min-height: 15px;
	border-bottom: 2px solid rgb(160, 160, 160);
  margin-bottom: 15px;
}

.progress-meter > .meter {
	position: relative;
	float: left;
	min-height: 15px;
	border-width: 0px;
	border-style: solid;
	border-color: rgb(160, 160, 160);
}

.progress-meter > .meter-left {
	border-left-width: 2px;
}

.progress-meter > .meter-right {
	float: right;
	border-right-width: 2px;
}

.progress-meter > .meter-right:last-child {
	border-left-width: 2px;
}

.progress-meter > .meter > .meter-text {
	position: absolute;
	display: inline-block;
	bottom: -20px;
	width: 100%;
	font-weight: 700;
	font-size: 0.85em;
	color: rgb(160, 160, 160);
	text-align: left;
}

.progress-meter > .meter.meter-right > .meter-text {
	text-align: right;
}


</style>