<%
# Copyright (C) 2011 - present Instructure, Inc.
#
# This file is part of Canvas.
#
# Canvas is free software: you can redistribute it and/or modify it under
# the terms of the GNU Affero General Public License as published by the Free
# Software Foundation, version 3 of the License.
#
# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along
# with this program. If not, see <http://www.gnu.org/licenses/>.
%>

<div class="answer" id="form_answer_template" style="display: none; _width: 100%;">

  <table style="width: 100%; position: relative; _height: 10px; min-height: 10px;">
    <tr>
      <td class="answer_select" style="width: 30px;">
        <div style="width: 30px;" class="answer_box">
          <% click_to_set_correct = t("Click to set this answer as correct") %>
          <button class="select_answer_link no-hover" title="<%= click_to_set_correct %>" style="border: none; padding: 0; background: none">
            <span class="selectAsCorrectAnswerId screenreader-only"></span>
            <%= image_tag "blank_answer.png", :class => "answer_image", :alt => click_to_set_correct %>
          </button><br/>
          <span class="answer_weight"><input class="float_value" type="text" style="width: 25px;" aria-label="<%= t("Answer Weight") %>" name="answer_weight"/>%</span>
        </div>
      </td><td>
        <div class="select_answer answer_type">
          <label for="answer_text"><b><%= t 'possible_answer', 'Possible Answer' %></b></label>
          <input type="text" class="disabled_answer" style="width: 200px;" name="answer_text" aria-label="<%= t 'possible_answer', 'Possible Answer' %>" placeholder="<%= t('Answer Text') %>" />
          <input type="hidden" name="answer_html"/>
          <span class="answer_html" style="display:inline-block;width:100%;"></span>
        </div>
        <div class="fixed_answer answer_type">
          <b class="answer_text" tabindex="0"></b>
        </div>
        <div class="short_answer answer_type">
          <label class="short_answer_header" for="answer_text"><b><%= t 'possible_answer', 'Possible Answer' %></b></label>
          <input type="text" name="answer_text" aria-label="<%= t 'possible_answer', 'Possible Answer' %>" placeholder="<%= t('Answer Text') %>"/>
        </div>
        <div class="matching_answer answer_match answer_type">
          <div class="answer_match_left">
            <% matching_left_text = t('Matching left side') %>
            <input type="text" style="width: 85%;" name="answer_match_left" placeholder="<%= matching_left_text %>" aria-label="<%= matching_left_text %>"/>
          </div>
          <input type="hidden" name="answer_match_left_html"/>
          <div class="answer_match_left_html"></div>
          <div class="answer_match_middle">&nbsp;
          </div>
          <div class="answer_match_right">
            <% matching_right_text = t('Matching right side') %>
            <input type="text" style="width: 95%;" name="answer_match_right" placeholder="<%= matching_right_text %>" aria-label="<%= matching_right_text %>"/>
          </div>
          <div class="clear"></div>
        </div>
        <div class="numerical_answer answer_type">
          <select style="font-weight: bold;" class="numerical_answer_type" name="numerical_answer_type" aria-label="<%= t 'numerical_answer', 'Numerical Answer' %>">
            <option value="exact_answer"><%= before_label(:exact_answer, "Exact Answer") %></option>
            <option value="range_answer"><%= before_label(:answer_in_range, "Answer in the Range") %></option>
            <option value="precision_answer"><%= before_label(:answer_with_precision, "Answer with Precision") %></option>
          </select>
          <span class="exact_answer numerical_answer_text">
            <%= t(:exact_answer_with_error_margin_accessible, "*exact answer* with error margin #error margin#", :wrapper => {
                  '*' => '<input class="float_value long" type="text" style="width: 50px;" name="answer_exact" aria-label="\1"/>',
                  '#' => '<input class="float_value long" type="text" style="width: 70px;" name="answer_error_margin" aria-label="\1"/>' }) %>
          </span>
          <span class="range_answer numerical_answer_text">
            <%= t(:answer_in_range_accessible, "between *range start* and #range end#", :wrapper => {
                  '*' => '<input class="float_value long" type="text" style="width: 50px;" name="answer_range_start" aria-label="\1"/>',
                  '#' => '<input class="float_value long" type="text" style="width: 50px;" name="answer_range_end" aria-label="\1"/>' }) %>
          </span>
          <span class="precision_answer numerical_answer_text">
            <%= t(:answer_with_precision_accessible, "*exact answer* with precision #precision#", :wrapper => {
                  '*' => '<input class="float_value precision" type="text" style="width: 50px;" name="answer_approximate" aria-label="\1"/>',
                  '#' => '<input class="precision_value" type="text" style="width: 50px;" name="answer_precision" aria-label="\1" title="' + t('number between 1 and 16 inclusive') + '"/>' }) %>
          </span>
        </div>
        <div class="answer_comments comment empty">
          <div class="comment_top"></div>
          <% edit_comment_text = t("Click to enter comments, if the student chooses this answer") %>
          <a href="#" class="comment_focus" title="<%= edit_comment_text %>">
            <span class="ellipsis" aria-hidden="true">...</span>
            <i class="icon-edit standalone-icon"></i>
            <span class="commentAnswerId screenreader-only"></span>
            <span class="screenreader-only"><%= edit_comment_text %></span>
          </a>
          <span id="comments_header" class="details"><%= before_label(:answer_comments, "Comments, if the student chooses this answer") %></span>
          <input type="hidden" name="answer_comment_html" />
          <div class="answer_comment_html comment_html"></div>
        </div>
        <div style="display: none;">
          <span class="blank_id">&nbsp;</span>
          <span class="id">&nbsp;</span>
          <span class="match_id">&nbsp;</span>
        </div>
      </td><td style="vertical-align: top; padding-top: 0.5em; text-align: <%= direction('right') %>; width: 40px;">
        <div class="question_actions">
          <% edit_html_text = t("Toggle editing answer text as HTML") %>
          <% delete_html_text = t("Delete this Answer") %>
          <a href="#" class="edit_html" title="<%= edit_html_text %>">
            <i class="icon-edit standalone-icon"></i>
            <span class="editAnswerId screenreader-only"></span>
            <span class="screenreader-only"><%= edit_html_text %></span>
          </a>
          <a href="#" class="delete_answer_link" title="<%= delete_html_text %>">
            <i class="icon-trash standalone-icon"></i>
            <span class="deleteAnswerId screenreader-only"></span>
            <span class="screenreader-only"><%= delete_html_text %></span>
          </a>
        </div>
      </td>
    </tr>
  </table>
</div>

