Notes

{% fetchxml accDetailsQuery %}
<fetch mapping='logical'>
<entity name='appstore_accelerator'>
<attribute name='appstore_name' />
<attribute name='appstore_description' />
<attribute name='appstore_avgrating' />
<attribute name='appstore_videolink' />
<filter type='and'>
<condition attribute='appstore_acceleratorid' operator='eq' value='3ff18a52-04cb-ee11-9079-6045bd1aadae' />
</filter>
</entity>
</fetch>
{% endfetchxml %}

{% fetchxml carouselsQuery %}
<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='3ff18a52-04cb-ee11-9079-6045bd1aadae' />
</filter>
</entity>
</fetch>
{% endfetchxml %}

<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Display Name, Description, and Average Rating -->
{% if accDetailsQuery.results.entities.size > 0 %}
<h1 id="acc-name">{{ accDetailsQuery.results.entities[0]["appstore_name"] }}</h1>
{% endif %}
<div class="rating-container">
<p id="average-rating">Average Rating:</p>
<!-- Display star rating if needed -->
<div class="star-rating">
{% if accDetailsQuery.results.entities.size > 0 %}
{% assign averageRating = accDetailsQuery.results.entities[0]["appstore_avgrating"] %}
{% assign integerPart = averageRating | floor %}
{% assign decimalPart = averageRating | minus: integerPart %}
{% if decimalPart < 0.5 %} {% assign roundedRating=integerPart %} {% else %} {% assign
roundedRating=integerPart | plus:1 %} {% endif %} <!-- Display star rating if needed -->
{% for i in (1..5) %}
{% if i <= roundedRating %} <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">{{ accDetailsQuery.results.entities[0]["appstore_description"] }}</p>
<button class="yellow-button">Get Started</button>
<button class="yellow-button">Live View</button>
</div>
<div class="col-md-6">
{% if carouselsQuery.results.entities.size > 0 %}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
{% for carousel in carouselsQuery.results.entities %}
<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 caro in carouselsQuery.results.entities %}
<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 %}

<!-- Video -->
{% if accDetailsQuery.results.entities[0]["appstore_videolink"] %}
<video controls width="100%" height="auto">
<source src="{{ videoQuery.results.entities[0]['appstore_videolink'] }}" type="video/mp4">
Your browser does not support the video tag.
</video>
{% endif %}

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




<!--<style>
.carousel .item img {
max-width: 100%;
/* Set the maximum width of the carousel image */
height: auto;
/* Automatically adjust the height based on aspect ratio */
}

.video {
width: 100%;
/* Set the width of the video player */
height: auto;
/* Automatically adjust the height based on aspect ratio */
} -->
<style>
.carousel .item {
background-size: cover;
background-repeat: no-repeat;
}

.star-rating {
display: inline;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
/* Adjust as needed */
}

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

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

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

#acc-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>
<script>
//Function to extract GUID from URL
function getGUIDFromURL() {
var urlParams = new URLSearchParams(window.location.search);
return urlParams.get('acceleratorid');
}
//Get GUID from URL
var guidFromURL = getGUIDFromURL();
</script>