Resource details view

</style>
<div class="container-fluid" id='resource-details'>
  
<div class="position-relative overflow-hidden text-left" id="banner" style="width:80%;float:left;">
 $(if) $(image_count) greater than 0 $(then)
    <div>
       $(image_lightbox:auto)
    </div>
    $(endif)
</div>
<div class="position-relative overflow-hidden text-left" style="width:20%;">$(rimages)</div>
  
  <div class="row" id="content">
    <div class="col-lg-8">
           <div class="header_row"><h1>$(name)</h1> </div> 
            
         <div class="custom_properties main">

$(if)$(prop_res_location)$(then)
        <div class=""><div class="custom_property">  <i class="fa fa-map-marker" aria-hidden="true"></i> $(prop_res_location)</div></div>$(endif)
        $(if)$(resource_rating_votes) greater than 0 $(then)  
        <div class=""><div class="custom_property"><i class="fa fa-star"></i> $(resource_rating) ($(resource_rating_votes) $(S_VOTES))</div></div>$(endif)
        $(if)(prop_res_number_of_persons) greater than 0 $(then)  
        <div class=""><div class="custom_property"><i class="fas fa-user-alt"  title="Max.number of persons"></i> $(prop_res_number_of_persons) $(S_PERSON)</div></div>$(endif)

</div>
    
       
     <h5 class="mb-4">$(S_DESCRIPTION)</h5>
     <p class='description'>$(desc)</p>
     
       
    <h5 class="mb-4">Amenities</h5>
    <div class="custom_properties">
        $(resource_property_list)
    </div>

<div class="lead" id="calendar_view"> <h5 class="mb-4">$(S_AVAIL)</h5>
     $(calendar_preview_with_params?style=multi-month-responsive&resource_id=$(resource_id)&nox=1&find_first_av=1)</div>
    
    
    $(if)$(prop_res_gps_coords)$(then)
    <div class="lead"><h5 class="mb-4">Location</h5>$(goog_map_res_100%_250)</div>
    $(endif)
    
    
    $(if)$(resource_rating_votes) greater than 0 $(then)  
    <div class="lead" id="rating_section">
        <h5 class="mb-4">$(S_RATING)</h5>
        $(resource_rating_stars) $(resource_rating) out of 5 | $(resource_rating_votes) $(S_VOTES)</br>
        $(resource_rating_inline)
    </div>
    $(endif)
 
    <p class='resource-footer'>
        <a href='$(reserve_url)' role='button' class='btn btn-primary btn-lg'>$(S_RESRES)</a>
    </p>
      
    </div>
    
     
    <div class="col-lg-4" id="booking_form_widget">
        <h5 class="mb-4">$(S_RESRES)</h5>
        $(price_preview)
    </div>
  
  </div>

</div>
 
<div id="mobile_action_sticky"> 
 <a class='btn btn-primary' role='button' href='#calendar_view'>$(S_AVAIL)</a> 
 <a class='btn btn-primary' role='button' href='$(reserve_url)'>$(reserve_text)</a>
</div>

Click to use WYSIWYG / visual editor in place of HTML code

Modify with AI prompt Verify code

This template lets you specify the HTML code which will be used for each resource details view. The template can contain the tag $(reserve_url) which will be replaced by Planyo with a link to the resource reservation page. The tag $(price_preview) will insert the price preview widget which can be used to quickly show availability and price for the desired dates. You can use the version $(price_preview:rental_prop_xxx,rental_prop_yyy) if you'd like extra form items (in this case xxx and yyy, but it can be any number of comma-separated items prefixed with rental_prop_) to be displayed inside the widget. Use the version $(price_preview_horizontal) for a horizontal form. The tag $(initial_form_fields) will insert the initial booking form fields widget. You can use the version $(initial_form_fields:rental_prop_xxx,rental_prop_yyy) if you'd like extra form items (in this case xxx and yyy, but it can be any number of comma-separated items prefixed with rental_prop_) to be displayed inside the widget. Use the version $(initial_form_fields_horizontal) for a horizontal form.

The template can also use general tags (how to use tags?). Please see the following FAQ questions for a detailed tag list:
Tag playground
Conditional printing of texts
Universal tags
Site data
Resource data