{{ header }}{{ column_left }}
<!-- Content Wrapper. Contains page content -->
<div id="content" class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <div>
      <div class="pull-right">
        <a href="{{ text_video_tutorial_url_install }}" target="_blank" class="btn btn-info btn-sm" data-toggle="tooltip" title="{{ button_video_tutorial_install }}"><i class="fa fa-video-camera"></i> {{ button_video_tutorial_install }}</a>
        <a href="{{ cancel }}" class="btn btn-default btn-sm" data-toggle="tooltip" title="{{ button_cancel }}"><i class="fa fa-reply"></i> {{ button_cancel }}</a>
      </div>
      <h1>
        {{ heading_title }}
      </h1>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <ul class="breadcrumb">
          {% for breadcrumb in breadcrumbs %}
          <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </section>

  <!-- Alert -->
  <section class="content-header">
    {% if success %}
    <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
        <i class="fa fa-check-circle" aria-hidden="true"></i>&nbsp;{{ success }}
    </div>
    {% endif %}
    {% if error %}
    <div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp;{{ error }}
    </div>
    {% endif %}
  </section>
  <!-- /.alert -->

  <!-- Main content -->
  <section class="content">

    <!-- Default box -->
    <div class="box">
      <div class="box-header with-border">
        <h3 class="box-title">{{ text_panel_heading }}</h3>

        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="{{ text_collapse }}">
            <i class="fa fa-minus"></i></button>
        </div>
      </div>
      <div class="box-body">
        <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form" class="form-horizontal">
            <input type="hidden" name="advertise_google_checklist_confirmed" value="1" />

            <div class="alert alert-info">
                {{ text_checklist_intro }}
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <tbody>
                        <tr>
                            <td class="text-center td-pointer"><input type="checkbox" name="acknowledge[0]" /></td>
                            <td class="text-left">{{ text_checklist_acknowledge_0 }}</td>
                        </tr>
                        <tr>
                            <td class="text-center td-pointer"><input type="checkbox" name="acknowledge[1]" /></td>
                            <td class="text-left">{{ text_checklist_acknowledge_1 }}</td>
                        </tr>
                        <tr>
                            <td class="text-center td-pointer"><input type="checkbox" name="acknowledge[2]" /></td>
                            <td class="text-left">{{ text_checklist_acknowledge_2 }}</td>
                        </tr>
                        <tr>
                            <td class="text-center td-pointer"><input type="checkbox" name="acknowledge[3]" /></td>
                            <td class="text-left">{{ text_checklist_acknowledge_3 }}</td>
                        </tr>
                        <tr>
                            <td class="text-center td-pointer"><input type="checkbox" name="acknowledge[4]" /></td>
                            <td class="text-left">{{ text_checklist_acknowledge_4 }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="pull-right">
                <button type="submit" class="btn btn-primary">{{ button_proceed }}</button>
            </div>
        </form>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->

  </section>
  <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<style type="text/css">
    .td-pointer {
        cursor: pointer;
    }
</style>
<script type="text/javascript">
(function($) {
    $('input[name^=acknowledge]').change(function(e) {
        $(this).closest('tr').toggleClass('success', $(this).is(':checked'));

        $('button[type="submit"]').attr('disabled', $('input[name^=acknowledge]:not(:checked)').length > 0);
    }).trigger('change');

    $('input[name^=acknowledge]').closest('td').click(function(e) {
        if ($(e.target).is('input')) {
            return;
        }

        var checkbox = $(this).find('input[name^=acknowledge]').first();

        $(checkbox).prop('checked', !$(checkbox).prop('checked')).trigger('change');
    });
})(jQuery);
</script>
{{ footer }}