{{ block title }}
    Label
{{ endblock }}
{{ block content }}

<!-- Display the description -->
<pre id="content">
    {{des}}
</pre>

<h3>Task</h3>
<p>Find the sponsor in a given YouTube video description. If no sponsor is found, type <b>None</b>. Typically, sponsors are mentioned in phrases like "thanks to the sponsor for sponsoring this video" or "this video is sponsored by the sponsor." Make sure to check if the video is explicitly labeled as non-sponsored or if it's requesting sponsorship without mentioning a specific sponsor. If the sponsorship isn't clearly indicated, type <b>None</b>. Avoid including any affiliate links, and provide the results solely based on the description. </p>
<ul>
    <li>If multiple sponsors occur, please divide them with ";". For example, a list can be <b>"A; B; C"</b></li>
    <li>If no sponsors, please type <b>None</b>, and do not type other text like none. </li>
    <li>For your convenience, the "sponsor" text is colorized as red. </li>
</ul>

    {{ formfields }}

    <br>

    {{ next_button }}

<style>
    pre {
        white-space: pre-wrap; /* Allows the text to wrap */
        word-wrap: break-word; /* Allows unbreakable words to be broken */
        width: 80%; /* Optional: Sets the width to 80% of the parent container */
        max-width: 800px; /* Optional: Sets the maximum width to 800px */
    }
    .highlight {
            color: red;
        }
</style>

<script>
    // Get the pre element by its ID
    const preElement = document.getElementById("content");

    // Get the text content
    const text = preElement.textContent;

    // Use regex to replace 'sponsor' with the highlighted version
    const highlightedText = text.replace(/sponsor/gi, '<span class="highlight">$&</span>');

    // Update the pre element's inner HTML
    preElement.innerHTML = highlightedText;
</script>


{{ endblock }}