<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
<%= @template.title %>
</title>
<style>
html { font-family: <%= @formatting[:font_face].tr('"', '') -%>; font-size: <%= @formatting[:font_size] -%>pt; }
h1 { font-size: <%= @formatting[:font_size] + 2 -%>pt; font-face:bold; padding: 0;}
h2 { font-size: <%= @formatting[:font_size] + 1 -%>pt; font-face:bold; padding: 0; margin: 1em 0 0 0;}
h3 { font-size: <%= @formatting[:font_size] + 0 -%>pt; font-face:bold; padding: 0; margin: 1em 0 0 0;}
h2 + div.question > h3 { margin: 0; }
table, tr, td, th, tbody, thead, tfoot { page-break-inside: avoid !important; }
table { border-collapse: collapse; }
th, td { border: 1px solid black !important; padding: 2px; }
p { margin: 0.25em 0; }
</style>
</head>
<body>
<% @template.phases.each do |phase| %>
<div style="page-break-before:always;"></div> <!-- Page break before each phase -->
<h1><%= "#{@template.org.name}: #{@template.title}" %><%= @template.phases.length > 1 ? " - #{phase.title}" : "" %></h1>
<% phase.sections.each do |section| %>
<h2><%= section.title %></h2>
<% section.questions.each do |question| %>
<div class="question">
<p><%= raw question.text %></p>
<% q_format = question.question_format %>
<% if q_format.option_based? %>
<ul>
<% question.question_options.each do |option| %>
<li><%= option.text %></li>
<% end %>
</ul>
<% end %>
</div>
<div class="annotations">
<% question.annotations.each do |annotation| %>
<br>
<p><i><%= annotation.type == 0 ? _('Example Answer') : _('Guidance') %></i>:</p>
<div style="margin-left: 15px;"><%= raw annotation.text %></div>
<% end %>
</div>
<% end %>
<% end %>
<% end %>
</body>
</html>