<div id="tos_prompt" class="hidden">
  <h2 class="heading">
    <span>Symphony</span>
  </h2>
  <div class="agreement">
    <p>
      hi </p>
    <p>
      this is my personal archive dont be a dick</p>

    <p class="confirmation">
      <input type="checkbox" id="tos_agree" />
      <label for="tos_agree"><%= t(".read_and_understood") %></label>
    </p>

    <p class="confirmation">
      <input type="checkbox" id="data_processing_agree" />
      <label for="data_processing_agree"><%= t(".data_processing_agreement") %></label>
    </p>

    <% if current_user.nil? %>
      <p class="submit">
        <%= button_tag t(".agree_and_consent"), disabled: true, type: "button", id: "accept_tos" %>
      </p>
    <% else %>
      <%= form_tag end_tos_prompt_user_path(current_user),
            method: :post,
            remote: true do %>
        <p class="submit">
          <%= submit_tag t(".agree_and_consent"), disabled: true, id: "accept_tos" %>
        </p>
      <% end %>
    <% end %>

  </div>
</div>

<%# content_for footer renders this when we don't want it %>
<%= javascript_tag do %>
  $j(document).ready(function() {
    var container = $j("#tos_prompt");
    var outer = $j("#outer");
    var button = $j("#accept_tos");
    var tosCheckbox = document.getElementById("tos_agree");
    var dataProcessingCheckbox = document.getElementById("data_processing_agree");

    var checkboxClicked = function() {
      button.attr("disabled", !tosCheckbox.checked || !dataProcessingCheckbox.checked);
      if (this.checked) {
        button.on("click", function() {
          acceptTOS();
          outer.removeClass("hidden").removeAttr("aria-hidden");
          $j.when(container.fadeOut(500)).done(function() {
            container.remove();
          });
        });
      };
    };

    setTimeout(showTOSPrompt, 1500);

    function showTOSPrompt() {
      $j.when(container.fadeIn(500)).done(function() {
        outer.addClass("hidden").attr("aria-hidden", "true");
      });

      $j("#tos_agree").on("click", checkboxClicked).change();
      $j("#data_processing_agree").on("click", checkboxClicked).change();
    };
  });
<% end %>
