<!DOCTYPE html>
<html>
  <head>
    <title>Concerto Player</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%# PWA Configuration %>
    <%= tag.link rel: "manifest", href: frontend_manifest_path(@screen.id) %>
    <%= tag.meta name: "theme-color", content: "#007BFF" %>
    <%= tag.meta name: "mobile-web-app-capable", content: "yes" %>
    <%= tag.meta name: "apple-mobile-web-app-capable", content: "yes" %>
    <%= tag.meta name: "apple-mobile-web-app-status-bar-style", content: "black-fullscreen" %>
    <%= tag.meta name: "apple-mobile-web-app-title", content: "Concerto" %>
    <%= tag.link rel: "apple-touch-icon", href: "/apple-touch-icon.png" %>

    <%= vite_client_tag %>
    <%= vite_javascript_tag 'player' %>
    <style>
      html, body, #screen {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="screen" data-api-url="<%= frontend_screen_url(@screen.id, format: :json) %>"></div>
  </body>
</html>