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>

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