-# #table-component-container-container= react_component 'Table', props = {url: "#{table_path @table}"}, html_options = {id: "table-component-container"}
#table-component

  %p
    Table:
    = @table.title

  - if policy(@table).update?
    .owner-controls
      = button_to 'Rename', edit_table_path(@table), class: "smallbtn", method: :get
      = button_to 'Delete', @game, :method => :delete, :data => { :confirm => 'Are you sure?' }, class: "smallbtn"

  - if @game && @game.already_has?(current_user)
    - if @game.startable? 
      = button_to 'Start', start_game_path(@game)

    -# - if @game.winner_player_id || @game.nil?
    -#   = button_to 'New Game', new_game_table_path(@table)

  - if (@game && !@game.startable?) || !@game
    #table-controls
      #newgame= button_to 'New Game', new_game_table_path(@table)

    -# #qrcode
    -# :javascript
      function gen_qrcode(){
        var qrcode = new QRCode(document.getElementById("qrcode"), {
          text: "#{request.original_url}",
          width: 384,
          height: 384,
          colorDark : "#000000",
          colorLight : "#ffffff00",
          correctLevel : QRCode.CorrectLevel.H
        });
      }
      gen_qrcode();
      $('#qrcode').on('click', function(e) {
        $('#qrcode').toggleClass("full");
        e.preventDefault();
      });

  #game-component
    - if @game && @game.winner_player_id
      %h1= @game.status

    #playerList
      #top
        = render "seat", seat: @seats[0]
      #mid
        = render "seat", seat: @seats[3]

        = render "play_to_beat"

        = render "seat", seat: @seats[1]

      #bot
        = render "seat", seat: @seats[2]

  :javascript
    var soft_token = "#{current_user.soft_token}";
  -# = javascript_include_tag 'table-loader'

-# - if @table.skyspace_url
  %iframe#skyspaces{allow:"camera #{@table.skyspace_url}; microphone #{@table.skyspace_url}", src: "#{@table.skyspace_url}"}