#if(${xf.ViewSkinDetailSetting("Displayrssicons",true)}) 
<!-- Rss Begin-->
<div class="event_rss"><a href="${xf.GoRssUrl()}" target="_blank"><img src="${xf.DetailPath}images/rss.png" alt="${xf.ViewLanguage(" RSS","RSS")}" title="${xf.ViewLanguage("RSS","RSS")}" /></a></div>
<!-- Rss End--> 
#end
<div class="event-detail $SkinDetailThemeName" id="event-detail${ModuleID}">
  <div class="event-title" style="border-left-color:$DataItem.color"> #if(${xf.ViewSkinDetailSetting("DisplaytlDate",true)})
    <div class="event-date">
      <div class="endtime">$DataItem.EndTime.ToString("dd")<span>$DataItem.EndTime.ToString("MMM")</span> </div>
      $DataItem.StartTime.ToString("dd")<span>$DataItem.StartTime.ToString("MMM")</span> </div>
    #end
    <div class="event-title-right"> #if(${xf.ViewSkinDetailSetting("displaytopt",true)})
      <h1 class="news_title"> ${xf.ViewContent("Title",$DataItem)} #if($IsAdmin || $IsAdministrator || $DataItem.CreateUser == $UserInfo.UserID) <span class="news_edit"> <a href="${xf.GoEditUrl($DataItem)}" target="_blank"> <img src="${xf.DetailPath}images/edit.gif" alt="${xf.ViewLanguage("Edit","Edit")}" title="${xf.ViewLanguage("Edit","Edit")}" /> </a> </span> #end </h1>
      #end
      #if(${xf.ViewSkinDetailSetting("DisplayttReturn",true)}) <a href="${xf.GoUrl()}" class="event-return"><span class="fa fa-mail-reply"></span> ${xf.ViewLanguage("Return","Return")}</a> #end
      <div class="event-info">#if(${xf.ViewSkinDetailSetting("DisplayttDate",true)}) <span class="event-time"><span class="fa fa-clock-o"></span> #if($DataItem.Rules.AllDay==1)${DataItem.StartTime.ToString(${xf.ViewSkinDetailSetting("AllDaydate","dd MMM, yyyy")})} — ${DataItem.EndTime.ToString(${xf.ViewSkinDetailSetting("AllDaydate","dd MMM, yyyy")})} #else ${DataItem.StartTime.ToString(${xf.ViewSkinDetailSetting("dateformat","dd MMM, yyyy tt h:mm")})} — ${DataItem.EndTime.ToString(${xf.ViewSkinDetailSetting("dateformat","dd MMM, yyyy tt h:mm")})}#end #if(${xf.ViewSkinDetailSetting("DisplayTimeZone",true)})<span class="TimeZone">${TimeZone} </span>#end</span> &nbsp;&nbsp; #end
        #if(${xf.ViewSkinDetailSetting("DisplayttLocation",true)}) <span class="event-location"><span class="fa fa-map-marker"></span> ${xf.ViewContent("Location",$DataItem)}</span> #end </div>
    </div>
    <div class="clear"></div>
  </div>
  <div class="event_thum"> 
    <!-- <img src="${xf.ViewPicture($DataItem)}"  alt="${xf.ViewContent("Title",$DataItem)}" title="${xf.ViewContent("Title",$DataItem)}"/> --> 
    #if(${xf.ViewItemSetting($DataItem,"displayFeatured",true)}=="true" && $DataItem.Picture > 0 )
    <div class="event_featured"> <img src="${xf.ViewPicture($DataItem)}" title="${xf.ViewContent("Title",$DataItem)}" /> </div>
    #end
    #if($DisplayGallery)
    <div class="event_gallerys"> [Gallerys] </div>
    #end </div>
  <div class="event-content" style="display: block;"> #if($DataItem.Summary > 0 && ${xf.ViewSkinDetailSetting("displaysummary",true)})
    <div class="event-details ">
      <h5><span class="fa fa-bookmark"></span> ${xf.ViewLanguage("EventSummary","Event summary")}</h5>
      <div class="summary">${xf.ViewContent("Summary",$DataItem)}</div>
    </div>
    #end
    
    #if(${xf.ViewContent("ContentText",$DataItem)}!="" && ${xf.ViewSkinDetailSetting("displaydetails",true)})
    <div class="event-details">
      <h5><span class="fa fa-file-text"></span> ${xf.ViewLanguage("EventDetails","Event details")}</h5>
      #if(${xf.ViewItemSetting($DataItem,"NeedLogin","false")} == "false" || $UserInfo.UserID > 0)
      <div class="summary">${xf.ViewContent("ContentText",$DataItem)}</div>
      #else
      <div class="summary"> ${xf.ViewLanguage("Login_left","You need to log in to see the article details, please")} <a href="${xf.GoLogin()}">${xf.ViewLanguage("Login","login")}</a>. </div>
      #end </div>
    #end
    #if(${xf.ViewSkinDetailSetting("displayauthor",true)})
    <div class="event-details">
      <h5><span class="fa fa-user"></span> ${xf.ViewLanguage("Author","Author")}</h5>
      <div class="summary">
        <div class="post_author_info clearfix">
          <div class="thum"><img src="${xf.ViewAuthorPic($DataItem)}" /></div>
          <div class="author_desc">${xf.ViewAuthorBiography($DataItem)}</div>
          <div class="post_author"><a href="${xf.GoAuthorUrl($DataItem.CreateUser)}">${xf.ViewUser($DataItem.CreateUser,"DisplayName")}</a></div>
        </div>
      </div>
    </div>
    #end
    #if(${xf.ViewSkinDetailSetting("displayatt",true)} && $DisplayAttachments && $Attachments.Count > 0)
    <div class="event-details">
      <h5><span class="fa fa-cloud-download"></span>${xf.ViewLanguage("Attachments","Attachments")}</h5>
      <div class="summary">
        <div class="attachments_box"> 
          <!--include Attachments start--> 
          [Attachments] 
          <!--include Attachments end--> 
        </div>
      </div>
    </div>
    #end
    
    #if(${xf.ViewSkinDetailSetting("displayica",true)})
    <div class="event-details">
      <h5><span class="fa fa-calendar"></span>${xf.ViewLanguage("iCalendar","iCalendar")}</h5>
      <br />
      <div class="summary"> <a href="${xf.GoIcal($DataItem)}" class="event-iCalendar">${xf.ViewLanguage("DownloadICS","Download ICS")}</a>&nbsp;&nbsp;<a href="${xf.GoIcal($DataItem,"true")}" target="_blank" class="event-iCalendar">${xf.ViewLanguage("iCalFeed","iCal Feed")}</a> </div>
      <br />
    </div>
    #end
    <div class="event-details-info">
      <ul>
        #if(${xf.ViewSetting("AddThis.DisplayShare",true)})
        <li>
          <h5><span class="fa fa-share-alt"></span> ${xf.ViewLanguage("Share","Share")}</h5>
          <div class="summary">
            <div class="post_sharing">${xf.ViewSharingTool($DataItem)}</div>
          </div>
        </li>
        #end
        #if(${xf.ViewSetting("Rating.DisplayRating",true)})
        <li>
          <h5><span class="fa fa-star-half-o"></span> ${xf.ViewLanguage("Rating","Rating")}</h5>
          <div class="summary">
            <div class="post_rating  ${xf.ViewSetting("Rating.icontype","big")}"> ${xf.ViewRating($DataItem)}
              <div class="datasSent"></div>
              <div class="serverResponse"></div>
            </div>
          </div>
        </li>
        #end
      </ul>
    </div>
    <div class="event-details-info">
      <ul>
        #if(${xf.ViewSkinDetailSetting("Displaycategorie",true)} && ${xf.ViewCategories($DataItem)}!="")
        <li>
          <h5><span class="fa fa-sitemap"></span>${xf.ViewLanguage("Category","Category")}</h5>
          <p>${xf.ViewCategories($DataItem)}</p>
        </li>
        #end
        #if(${xf.ViewSkinDetailSetting("Displaytag",true)} && ${xf.ViewTags($DataItem)}!="")
        <li>
          <h5><span class="fa fa-tag"></span>${xf.ViewLanguage("Tags","Tags")}</h5>
          <p>${xf.ViewTags($DataItem)}</p>
        </li>
        #end
      </ul>
    </div>
    <div class="event-details-info">
      <ul>
        #if(${xf.ViewSkinDetailSetting("displaytime",true)})
        <li>
          <h5><span class="fa fa-clock-o"></span> ${xf.ViewLanguage("Time","Time")}</h5>
          <div>#if($DataItem.Rules.AllDay==1)${DataItem.StartTime.ToString(${xf.ViewSkinDetailSetting("AllDaydate","dd MMM, yyyy")})} — ${DataItem.EndTime.ToString(${xf.ViewSkinDetailSetting("AllDaydate","dd MMM, yyyy")})} #else ${DataItem.StartTime.ToString(${xf.ViewSkinDetailSetting("dateformat","dd MMM, yyyy tt h:mm")})} — ${DataItem.EndTime.ToString(${xf.ViewSkinDetailSetting("dateformat","dd MMM, yyyy tt h:mm")})}#end</div>
          #if(${xf.ViewSkinDetailSetting("DisplayTimeZone2",true)})
          <div class="TimeZone">${TimeZone} </div>
          <br />
          #end
          #if(${xf.ViewSkinDetailSetting("DisplayUpcoming",true)})
          <dl class="upcomingdates">
          #if($DataItem.UpcomingRepeats.Count > 0)
            <dt>${xf.ViewLanguage("UpcomingDates","Upcoming dates")}</dt>
            #foreach($Repeat in $DataItem.UpcomingRepeats)
                #if($DateTimeNow < $Repeat.StartDateTime)  
                    <dd><a href="${xf.GoUrl($DataItem,$Repeat)}" title="${Repeat.StartDateTime.ToString(${xf.ViewSkinDetailSetting("dateformat","dd MMM, yyyy tt h:mm")})}" target="_blank">${Repeat.StartDateTime.ToString(${xf.ViewSkinDetailSetting("dateformat","dd MMM, yyyy tt h:mm")})} </a></dd>
                #end
            #end
          </dl>
          #end
          <script type="text/javascript">
						 $("#event-detail${ModuleID} .upcomingdates").each(function() {
							 var index=5,i=1,e=$(this);
							 if(e.find("dd").length>index){
								e.find("dd").hide();
								e.find("dd").slice(0,index*i).show();
								e.append("<a class=\"upcomingdatesmore\" href=\"javascript://\">More <em class=\"fa fa-angle-right\"></em></a>");
								e.find(".upcomingdatesmore").on("click",function(){
									i++;
									e.find("dd").slice(0,index*i).fadeIn();
									if(index*i>=e.find("dd").length){
										e.find(".upcomingdatesmore").remove();
									}
								})
							 }else{
								e.find("dd").show()
							 }
						});
                    </script> 
          #end </li>
        #end
        #if(${xf.ViewSkinDetailSetting("displaylocation",true)} && ${DataItem.AddressID} > 0)
        <li>
          <h5><span class="fa fa-map-marker"></span> ${xf.ViewLanguage("Address","Address")}</h5>
          #if(${DataItem.Address.Title} != "")
          <p class="address_title"><strong>${DataItem.Address.Title}</strong></p>
          #end
          #if(${DataItem.Address.Description} != "")
          <p> ${DataItem.Address.Description}</p>
          #end
          #if(${DataItem.Address.Phone} != "")
          <p><strong>${xf.ViewLanguage("Phone","Phone")}: </strong><span class="xEhidden-sm">${DataItem.Address.Phone}</span> <span><a href="tel:${DataItem.Address.Phone}" class="xEvisible-sm">${DataItem.Address.Phone}</a></span></p>
          #end
          #if(${DataItem.Address.Fax} != "")
          <p><strong>${xf.ViewLanguage("Fax","Fax")}:</strong> ${DataItem.Address.Fax}</p>
          #end
          #if(${DataItem.Address.Email} != "")
          <p><strong>${xf.ViewLanguage("Email","Email")}:</strong> <a href="mailto:${DataItem.Address.Email}" title="${DataItem.Address.Email}">${DataItem.Address.Email}</a></p>
          #end
          #if(${DataItem.Address.WebSite} != "")
          <p><strong>${xf.ViewLanguage("WebSite","Web Site")}:</strong> <a href="${DataItem.Address.WebSite}" title="${DataItem.Address.WebSite}" target="_blank">${DataItem.Address.WebSite}</a></p>
          #end
          #if(${xf.ViewContent("Location",$DataItem)} != "")
          <p><strong>${xf.ViewLanguage("Address","Address")}:</strong> ${xf.ViewContent("Location",$DataItem)} </p>
          #end </li>
        #end
      </ul>
    </div>
    #if(${xf.ViewSkinDetailSetting("displaymap",true)} && ${DataItem.AddressID} > 0)
    <div class="event-gmap" id="gmapdetail${ModuleID}"> </div>
    <script type="text/javascript">
	if(mapapikey){
		mapapikey = mapapikey==""?"${xf.ViewSetting("General.APIKey","")}":mapapikey;
	}else{
		var mapapikey = "${xf.ViewSetting("General.APIKey","")}";
	}
	var xE_Detail_map=function(){
		$("#gmapdetail${ModuleID}").gmap3({
              marker:{
                values:[{
					  latLng:[${xf.ViewContent("LocationXY",$DataItem)}],
					  data:"<h5>${DataItem.Address.Title}</h5>${DataItem.Address.MarkerText}"
				  }],
                options:{
                  draggable: false,
                  icon:"${xf.ViewLinkUrl($DataItem.Address.MarkerIcon,"")}"
                },
                events:{
                  mouseover: function(marker, event, context){
                    var map = $(this).gmap3("get"),
                      infowindow = $(this).gmap3({get:{name:"infowindow"}});
                    if (infowindow){
                      infowindow.open(map, marker);
                      infowindow.setContent(context.data);
                    } else {
                      $(this).gmap3({
                        infowindow:{
                          anchor:marker,
                          options:{content: context.data}
                        }
                      });
                    }
                  },
                  mouseout: function(){
                    var infowindow = $(this).gmap3({get:{name:"infowindow"}});
                    if (infowindow){
                      infowindow.close();
                    }
                  }
                }
              },
              map:{
                options:{
                  zoom: 10
                }
              }
            });
		}

		if (typeof($(document).gmap3) == "function") { 
			gmap3();
		}else{
			if (typeof mapcallback == 'function') { 
			var xE_Detail_map_new = mapcallback;
				mapcallback = function(){
					xE_Detail_map_new();
					xE_Detail_map();
				}
			}else{
				mapcallback = function(){
					xE_Detail_map();
				}
			}
		}


			
        </script> 
    #end
		
		#if( ${DataItem.StartTime} >= ${DateTimeNow})
		
    #if(${xf.ViewSetting("RegisterSettings.Registerenable",true)} )
    <div class="event-details">
      <h5><span class="fa fa-group"></span>${xf.ViewLanguage("REGISTER","REGISTER")}</h5>
      <br />
      <div class="event-rsvp" id="event-rsvp${ModuleID}">
      <div class="form_div_${ModuleId}">
      <ul class="rsvp-nav">
          <li class="attending" data-intention="0" ><span class="fa fa-group"><i class="number">${xf.ViewAttending($DataItem,0)}</i></span>
            <div class="info">
            <h6>${xf.ViewLanguage("Attending","Attending Event")}</h6>
              <p>${xf.ViewLanguage("Yesattend","Yes, I will attend")}</p>
            </div>
          </li>
          <li class="Maybe" data-intention="1"><span class="fa fa-group"><i class="number">${xf.ViewAttending($DataItem,1)}</i></span>
            <div class="info">
              <h6>${xf.ViewLanguage("Maybe","Maybe")}</h6>
              <p>${xf.ViewLanguage("Notattend","Not sure I will attend")}</p>
            </div>
          </li>
          <li class="not" data-intention="2"><span class="fa fa-group"><i class="number">${xf.ViewAttending($DataItem,2)}</i></span>
            <div class="info">
              <h6>${xf.ViewLanguage("NotAttending","Not Attending")}</h6>
              <p>${xf.ViewLanguage("Nonotattend","No, I will not attend")}</p>
            </div>
          </li>
           <div class="nav-message">
              <input type="checkbox" class="validate[required,maxSize[2000]] rsvp-nav-info" name="Ctl$${ModuleID}" id="Ctl_${ModuleID}" data-errormessage="${xf.ViewLanguage("attendance","Please select type of attendance")}"  />
          </div>
         
        </ul>
       <div class="clear"></div>

      #if(${Module.UserId}!=-1 || !${xf.ViewSetting("RegisterSettings.RSVPLogin",false)} )
        <div class="rsvp-from  " id="rsvp-from${ModuleID}">
          <ul>
            <li>
              <input class="rsvp-control name validate[required,maxSize[2000]] required" type="text" name="Name" placeholder="Name *" #if(${Module.UserId}!=-1) value="${UserInfo.DisplayName}" disabled #end />
            </li>
            <li>
              <input class="rsvp-control email validate[required,custom[email],maxSize[2000]]" type="text" placeholder="Email *" #if(${Module.UserId}!=-1) value="${UserInfo.Email}" disabled #end   />
            </li>
            <li>
            <input class="rsvp-control phone validate[required,validate[maxSize[2000]] " type="text" placeholder="Phone *"  /> 
            </li>
            <li>
              <textarea class="rsvp-control comment validate[maxSize[2000]] " rows="10" placeholder="Add comment..."></textarea>
            </li>
          </ul>
          <div class="rsvp-special">
            <input type="checkbox" class="emailme" checked/>${xf.ViewLanguage("MailRemind","Receive notification by email about the event.")}</div>
          <div class="rsvp-btn"> <span class="error-msg"></span>
            <input class="join-btn" type="button" value="${xf.ViewLanguage("Join","Join")}" />
          </div>
          <script type="text/javascript">
                
                    $("#event-rsvp${ModuleID} .rsvp-nav li").on("click",function(){
                        $(this).addClass("active").siblings().removeClass("active");
						$("#event-rsvp${ModuleID} input.rsvp-nav-info").attr("checked","checked");
                    })


                    $("#rsvp-from${ModuleID} .join-btn").on("click",function(e){
						if (!$('.form_div_${ModuleID}').validationEngine('validate')) {
							 return false;
						 }
                        e.preventDefault();
                        var ver=true;
						
						
                        if(ver){
							var addnumber=$("#event-rsvp${ModuleID} .rsvp-nav li.active");
                            var rsvpdata={
                                    Attending:addnumber.data("intention"),
                                    Name:$("#rsvp-from${ModuleID} .rsvp-control.name").val(),
                                    Email:$("#rsvp-from${ModuleID} .rsvp-control.email").val(),
                                    Phone:$("#rsvp-from${ModuleID} .rsvp-control.phone").val(),
                                    Comments:$("#rsvp-from${ModuleID} .rsvp-control.comment").val(),
                                    MailRemind:$("#rsvp-from${ModuleID} .emailme").attr('checked')?1:0
                                }
                         	 
						   	jQuery.ajax({url:"${xf.GoRegisterUrl($DataItem)}",data:rsvpdata,async:false,success:function(data){
								var data= JSON.parse(data); 
								if(data.result=="success"){
								//	var msg_text="${xf.ViewLanguage("successful","Thank you for registering to our event – you will be provided with details by email shortly.")}";
									var msg_text="Thank you for registering to our event – you will be provided with details by email shortly."
									
									
									if(data.Action=="Update"){
										 msg_text="${xf.ViewLanguage("Updateinfo","The info you submitted has been updated.")}"	
									}else{
										addnumber.find(".number").html(parseInt(addnumber.find("i").text())+1)
									}
									console.log(rsvpdata)
									$("#rsvp-from${ModuleID} .rsvp-control.phone").val(""),
									$("#rsvp-from${ModuleID} .rsvp-control.comment").val(""),
									$("#event-rsvp${ModuleID} input.rsvp-nav-info").removeAttr("checked");
									$("#event-rsvp${ModuleID} .rsvp-nav li").removeClass("active");
									if(${Module.UserId}==-1){
										$("#rsvp-from${ModuleID} .rsvp-control.name").val("")
										$("#rsvp-from${ModuleID} .rsvp-control.email").val("")
									}
									$("#rsvp-from${ModuleID} .error-msg").stop().hide().html(msg_text).fadeIn();
									$("#rsvp-from${ModuleID} .join-btn").attr("disabled","disabled")
									
								}else{
									var msg_text="${xf.ViewLanguage("unsuccessful","Your submission is unsuccessful.")}";
									$("#rsvp-from${ModuleID} .error-msg").stop().hide().html(msg_text).fadeIn(function(){ $(this).delay(5000).fadeOut()});
								}
								
							}});
                         
                        }
                    })		
                </script> 
        </div>
       #else
       <div class="rsvp-from" id="rsvp-from${ModuleID}">
          <div class="rsvp-msg" ><a href="${xf.GoLogin()}" title="login">${xf.ViewLanguage("loginsubmit","Please log in to submit information.")}</a></div>
          <div class="rsvp-btn">
            <input class="join-btn" type="button" value="Join"  disabled="disabled"/>
          </div>
       </div>
       #end 
       
				
      </div>  
        
      </div>
      <br />
    </div>
		#end 
    #end
    #if(${xf.ViewSetting("Comment.EnabledComment",false)})
    #if(${xf.ViewSetting("Comment.LoginComment",false)}==false || ${Module.UserId}>0)
    <div class="event-details-comment"> #parse("view_comment_disqus.html" ) </div>
    #else
    <div style="text-align:center; padding:10px ;"> ${xf.ViewLanguage("needtologin","You need to login  in order to comment.")} </div>
    #end
    
    #end </div>
</div>