show.html.leex

<section class="game">
  <h1>
    Game
  </h1>

  <div class="game-meta">
    Share this link:
    <span class="game-name">
      <a id="game-path" href="/games/<%= @game_name %>"><%= @game_name %></a>
    </span>
    <clipboard-copy aria-label='Copy game URL to clipboard' for="game-path" class="copy-btn" %>
      <svg aria-hidden='true' viewBox='0 0 16 16' version='1.1' data-view-component='true' height='16' width='16' class='icon octicon-clippy'>
        <path fill-rule='evenodd' d='M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z'></path>
      </svg>
      <svg style='display: none;' aria-hidden='true' viewBox='0 0 16 16' version='1.1' data-view-component='true' height='16' width='16' class='icon octicon-check color-icon-success'>
        <path fill-rule='evenodd' d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'></path>
      </svg>
    </clipboard-copy>
  </div>

  <div class="row">
    <div class="column">
      <label class="label">Your vote:</label>
      <div class="deck">
        <%= for card <- deck() do %>
          <button
            class="card button <%= if @current_vote == card do %>button-outline<% end %>"
            phx-click="vote"
            phx-value-vote="<%= card %>">
            <strong><%= card %></strong>
          </button>
        <% end %>
      </div>
      <div class="deck-actions">
        <button class="button" phx-click="new_round">
          New Round
        </a>
        <button class="button" phx-click="flip_cards" <%= display_votes?(assigns) && "disabled" %>>
          Flip cards
        </a>
      </div>
    </div>

    <div class="column">
      <label class="label">Votes (<%= votes_count(@votes) %>)</label>
      <div class="votes-details">
        <div class="players">
          <%= for player <- @players do %>
            <div class="player-status">
              <span class="vote-status <%= vote_class(player.vote) %>"></span>
              <span class="username"><%= player.name %></span>
              <%= if display_votes?(assigns) do %>
                <span class="vote">
                  <%= "#{player.vote}" %>
                </span>
              <% end %>
            </div>
          <% end %>
        </div>
      </div>
      <%= if display_votes?(assigns) do %>
        <div class="votes-summary">
          <%= for {key, val} <- stats(@votes) do %>
            <dl class="stat">
              <dt class="stat-name"><%= "#{key}" %></dt>
              <dd class="stat-value"><%= "#{val}" %></dd>
            </dl>
          <% end %>
        </div>
      <% end %>
    </div>
  </div>
</div>