#set($questionimage = $testbench.getQuestionImage($question))
#set($categoryimage = $testbench.getCategoryImage($question))

<!-- View-once category media -->
#if($question.getDefaultCategory().getProperty("imagemode") == "once")
	<input type="hidden" name="multipleresponses" value="false"/>	
	<div class="alert alert-info d-flex justify-content-between align-items-center">
		<span>This section is based on media you should view only once at the start of the test.</span>
		<button class="btn btn-sm btn-danger" data-bs-toggle="collapse" data-bs-target="#category-once-media">View Now</button>
	</div>
	<div id="category-once-media" class="collapse mb-3">
		<div class="d-flex justify-content-center">
			<img src="$home$categoryimage" class="img-fluid rounded" />
		</div>
	</div>
#end

<!-- Audio media -->
#if($pages.doesExist($categoryimage) && !$pages.getPage($categoryimage).isImage())
	<h5>Special Instructions</h5>
	<p class="text-muted">Listen to the audio before answering:</p>
	<audio controls class="w-100 mb-3">
		<source src="$home$categoryimage" type="audio/mpeg" />
		Your browser does not support the audio element.
	</audio>
#end

<!-- Category image (unless in once mode) -->
#if(!($question.getDefaultCategory().getProperty("imagemode") == "once"))
	#if($pages.doesExist($categoryimage) && $pages.getPage($categoryimage).isImage())
		<div class="d-flex justify-content-center mb-4">
			<img src="$home$categoryimage" class="img-fluid rounded" />
		</div>
	#end
#end

<!-- Question media or text -->
#if($question.media && $question.media != "")
	#set($asset = $mediaarchive.getAsset($question.media))
	<div class="mb-4 p-3 bg-light rounded shadow-sm">
		<div class="fw-bold mb-2">$!question.text</div>
		<div class="d-flex justify-content-center">
			<img src="$home$apphome/views/modules/asset/downloads/preview/large/${asset.sourcepath}/image1024x768.jpg"
			     class="img-fluid rounded"
			     data-ajax-modal
			     data-title="Image"
			     data-target="$home$apphome/test/imagelarge.html?assetid=${asset.id}&oemaxlevel=1" />
		</div>
	</div>
#else
	#if($user.get("oe_edit_mode") == "editing")
		<a class="oe-dataedit" data-target="#edit-$question.id" href="#">
			<img src="/openedit/components/html/theme/images/htmledit.png"/>
		</a>
	#end
	<div class="oe-editable mb-3 fw-bold" id="edit-$question.id"
	     data-dataid="$question.id" data-field="text" data-searchtype="question">
		$!question.text
	</div>

	#if($test.isComplete())
		<div class="mt-2">
			<strong>Explanation:</strong>
			<a class="oe-dataedit" data-target="#explain-$question.id" href="#">
				<img src="/openedit/components/html/theme/images/htmledit.png"/>
			</a>
			<div class="oe-editable" id="explain-$question.id"
			     data-dataid="$question.id" data-field="explanation" data-searchtype="question">
				$!question.explanation
			</div>
		</div>
	#end
#end

<!-- Response toggle -->
#set($hide = $question.getProperty("hideresponse") == "true" || $question.getDefaultCategory().getProperty("hideresponse") == "true")
#if($hide)
	<p><a class="showlink btn btn-sm btn-outline-secondary" href="#">Show/Hide Response</a></p>
#end

<!-- Response list -->
<div id="responsearea" #if($hide) style="display:none;" #end class="mt-4">
	<div class="row g-4 justify-content-center">
		#foreach($response in $question.getResponses())
			#set($selected = false)
			#if($node.wasSelected($response) || $responseinfo.responseid == $response.id)
				#set($selected = true)
			#end
			#set($responseimage = $response.responseimage)

			#if($selected)
				#set($bgclass = "bg-warning-subtle border-warning")
			#else
				#set($bgclass = "bg-white border")
			#end

			<div class="col-md-6">
  <label class="response-card w-100 h-100 p-3 rounded $bgclass d-block position-relative">
    <input type="radio" name="response.value" value="$response.getId()"
           class="visually-hidden response-radio" #if($selected) checked #end>
    <input type="hidden" name="response" value="$response.getId()" />
    
    <div>$response.getText()</div>

    #if($responseimage)
      #set($rasset = $mediaarchive.getAsset($responseimage))
      #if($rasset)
        <div class="mt-3 text-center">
          <img src="$mediaarchive.asLinkToPreview($rasset, 'image300x300.jpg')"
               class="img-fluid rounded mb-2" style="max-height:300px;" />
        </div>
      #end
    #end
  </label>
</div>


			#if($hide)
				<input type="hidden" name="${response.getId()}.value" value="$response.getId()" />
			#end

			#set($selected = false)
		#end
	</div>
</div>

<style>
.response-card {
  transition: background-color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  border: 1px solid #dee2e6;
}
.response-card:hover {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
}
.response-card input[type="radio"].visually-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.response-card input[type="radio"]:checked ~ div {
  font-weight: bold;
}
</style>


<script>
$(document).on('change', 'input[name="response.value"]', function () {
    $('input[name="response.value"]').each(function () {
        $(this).closest('.response-card')
               .removeClass('bg-warning-subtle border-warning')
               .addClass('bg-white border');
    });

    $(this).closest('.response-card')
           .removeClass('bg-white border')
           .addClass('bg-warning-subtle border-warning');
});
</script>