memorex

<h1 class="title is-3"> Deck: <%= @deck.name %><%= note_category(@card) %> </h1>

<%= if @card_id do %>
  <h4 class="title is-4"> FOCUSED DRILLING MODE  <%= live_patch "Go Back to Drilling Entire Deck", to: Routes.review_path(@socket, :home, %{deck: @deck}) %> </h4>
<% end %>

<%= if !@card || @daily_review_limit_reached? do %>
  <h3 class="title is-4"> No cards to review </h3>
<% else %>

  <%= if Card.is_image_card?(@card)  do %>
    <h4 class="title is-4"> Question: </h4>
    <img src={img_src(@card)} alt={img_alt(@card)} style="max-height: 500px;">

  <% else %>
    <h4 class="title is-4"> Question: <%= Card.question(@card) %> </h4>
  <% end %>

  <%= if @display == :show_question do %>
    <div class="control">
      <button class="button" phx-click="show-answer"> Answer </button>
    </div>
  <% end %>

  <%= if @display == :show_question_and_answer do %>
    <h4 class="title is-4"> Answer: <%= Card.answer(@card) %> </h4>

    <button class="button is-medium is-danger" phx-click="rate-difficulty" phx-value-answer_choice="again">
      <div>
        <span class="answer"> Again </span>
        <span class="answer"> <%= format(@interval_choices[:again])  %> </span>
      </div>
    </button>

    <button class="button is-medium is-warning" phx-click="rate-difficulty" phx-value-answer_choice="hard">
      <div>
        <span class="answer"> Hard </span>
        <span class="answer"> <%= format(@interval_choices[:hard])  %> </span>
      </div>
    </button>

    <button class="button is-medium is-info" phx-click="rate-difficulty" phx-value-answer_choice="good">
      <div>
        <span class="answer"> Good </span>
        <span class="answer"> <%= format(@interval_choices[:good])  %> </span>
      </div>
    </button>

    <button class="button is-medium is-success" phx-click="rate-difficulty" phx-value-answer_choice="easy">
      <div>
        <span class="answer"> Easy </span>
        <span class="answer"> <%= format(@interval_choices[:easy])  %> </span>
      </div>
    </button>
  <% end %>
<% end %>

<div id="debug-info" class={"debug-info " <> initially_show_debug_info?()}>
  <div class="subtitle is-6"> Debug Info 
    <img class="caret caret-down" src="/images/caret-down.svg" phx-click={hide_debug_info()} />
    <img class="caret caret-right" src="/images/caret-right.svg" phx-click={show_debug_info()} />
  </div>

  <div class="debug-contents">
    <hr>

    <table class="table deck-stats">
      <thead>
        <th> Total </th>
        <th> New </th>
        <th> Learn </th>
        <th> Review </th>
        <th> Due </th>
        <th> Reviewed Today </th>
      </thead>
      <tbody>
        <tr>
          <td> <%= @deck_stats.total %> </td>
          <td> <%= @deck_stats.new %> </td>
          <td> <%= @deck_stats.learn %> </td>
          <td> <%= @deck_stats.review %> </td>
          <td> <%= @deck_stats.due %> </td>
          <td> <%= @num_of_reviewed_cards %> </td>
        </tr>
      </tbody>
    </table>

    <%= if @prior_card_log do %>
      <.live_component module={MemorexWeb.CardLive.CardComponent} id={@prior_card_log.card.id} card={@prior_card_log.card} card_log={@prior_card_log} show_drill_link?={!@card_id} />
    <% end %>
  </div>
</div>