<div id="question-text"></div>
<div class="eval-ai-container">
  <div class="eval-ai-code-editor">
    <div class="used-prog-language">
      <span>{{ self.language }}</span>
    </div>
    <iframe id="monaco" frameborder="0" scrolling="no"></iframe>
    <div class="eval-ai-buttons">
      <button id="reset-button" class="eval-ai-button">Reset</button>
      <button id="submit-button" class="eval-ai-button btn btn-primary">Submit Code</button>
    </div>
  </div>

  <div class="result">
    <div class="tab">
      <span class="tablinks result-tab-btn" data-id="output" id="defaultOpen">Output</span>
      <span class="tablinks result-tab-btn" data-id="ai-feedback" id="ai-feedback-tab">AI feedback</span>
    </div>

    <div id="output" class="tabcontent">
      {% if self.language == "HTML/CSS" %}
      <iframe class="html-render" scrolling="no" frameBorder="0"></iframe>
      {% else %}
      <div class="stdout"></div>
      <div class="stderr"></div>
      {% endif %}
    </div>

    <div id="ai-feedback" class="tabcontent"></div>
  </div>
</div>
