Notes

{% fetchxml appDetailsQuery %}
<fetch mapping='logical'>
<entity name='crff0_appdetail'>
<attribute name='crff0_name' />
<attribute name='crff0_description' />
<filter type='and'>
<condition attribute='crff0_appdetailid' operator='eq' value='f45c424a-7cc5-ee11-a81c-6045bd6ca1b2' />
<!-- Replace with your actual App Details GUID -->
</filter>
</entity>
</fetch>
{% endfetchxml %}

{% fetchxml locationsQuery %}
<fetch distinct="true" mapping="logical" output-format="xml-platform" version="1.0" returntotalrecordcount="true">
<entity name='annotation'>
<attribute name='filename' />
<attribute name='documentbody' />
<attribute name='mimetype' />
<filter type='and'>
<condition attribute='objectid' operator='eq' value='f45c424a-7cc5-ee11-a81c-6045bd6ca1b2' />
<!-- Replace with your actual App Details GUID -->
</filter>
</entity>
</fetch>
{% endfetchxml %}

{% fetchxml ratingsQuery %}
<fetch mapping='logical'>
<entity name='crff0_apprating'>
<attribute name='crff0_ratings' />
<filter type='and'>
<condition attribute='crff0_appname' operator='eq' value='f45c424a-7cc5-ee11-a81c-6045bd6ca1b2' />
</filter>
</entity>
</fetch>
{% endfetchxml %}

{% assign interval = interval | integer %}
{% assign count = count | integer %}
{% assign height = height | integer %}
{% assign width = width | integer %}

<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Display Name, Description, and Average Rating -->
{% if appDetailsQuery.results.entities.size > 0 %}
<h1 id="app-name">{{ appDetailsQuery.results.entities[0]["crff0_name"] }}</h1>
{% endif %}
<div class="rating-container">
<p id="average-rating">Average Rating:</p>
<!-- Display star rating if needed -->
<div class="star-rating">
{% if ratingsQuery.results.entities.size > 0 %}
{% assign totalRating = 0 %}
{% for ratingEntity in ratingsQuery.results.entities %}
{% assign totalRating = totalRating | plus: ratingEntity["crff0_ratings"] %}
{% endfor %}
{% assign averageRating = totalRating | divided_by: ratingsQuery.results.entities.size % | ceil %}
{% assign countRating = ratingsQuery.results.entities.size %}
<!-- Display star rating if needed -->

{% for i in (1..5) %}
{% if i <= averageRating %} <span class="fa fa-star checked"></span>
{% else %}
<span class="fa fa-star"></span>
{% endif %}
{% endfor %}
</div>
{% else %}
<p>No ratings available for this app.</p>
{% endif %}
</div>
<p class="description">{{ appDetailsQuery.results.entities[0]["crff0_description"] }}</p>
<button class="yellow-button">Get Started</button>
<button class="yellow-button">Live View</button>
</div>

<div class="col-md-6">
{% if locationsQuery.results.entities.size > 0 %}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="{{interval}}">
<!-- Indicators -->
<ol class="carousel-indicators">
{% for location in locationsQuery.results.entities limit: count %}
<li data-target="#carousel-example-generic" data-slide-to="{{forloop.index0}}"
class="{% if forloop.first %}active{% endif %}"></li>
{% endfor %}
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
{% for loc in locationsQuery.results.entities limit: count %}
<div class="item {% if forloop.first %}active{% endif %}">
<img src=' data:{{ loc["mimetype"] }};base64,{{ loc["documentbody"] }}'>

</div>
{% endfor %}
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
{% endif %}
</div>
</div>
</div>

<style>
.carousel .item {
background-size: cover;
background-repeat: no-repeat;
}

.star-rating {
display: inline;
font-size: 12px;
/* Adjust as needed */
}

.fa-star {
color: #8d8c88;
/* Color for empty stars */
}

.fa-star.checked {
color: #ff9800;
/* Color for filled stars */
}

.fa-star-half.checked {
color: #ff9800;
/* Color for half-filled stars */
}

#left-content {
font-family: Arial, Helvetica, sans-serif;
}

#average-rating {
font-size: 12px;
margin-right: 10px;
font-weight: 700;
padding-top: 12px;
}

#app-name {
font-size: 32px;
font-weight: 700;
}

#location-info {
font-size: 14px;
}

.description {
font-size: 16px;
font-weight: 400;
}

.yellow-button {
background-color: #fcdc7b;
color: black;
border-radius: 4px;
height: 32px;
width: 92px;
font-size: 14px;
font-weight: 400;
border: 1px;

}

.rating-container {
display: flex;
align-items: center;
}
</style>

{% manifest %}
{
"type": "Functional",
"displayName": "Locations Slider",
"description": "Locations slider using the table 'Place' as the data source",
"tables": ["cr50f_place"],
"params": [
{
"id": "title",
"displayName": "Title",
"description": ""
},
{
"id": "interval",
"displayName": "Interval",
"description": "The amount of time to delay between automatically cycling an item. If false, carousel will not
automatically cycle. Default: 5000ms"
},
{
"id": "count",
"displayName": "Count",
"description": "The number of locations to display"
},
{
"id": "height",
"displayName": "Slide's height",
"description": "In px, default: 500px"
}
]
}
{% endmanifest %}