<html>
  <head>
    <link rel="stylesheet" href="https://stainly-cdn.fra1.cdn.digitaloceanspaces.com/static/{{ version }}/embedded/main.css">
  </head>
  <body>
    <h1>Embedded View Example</h1>
    <div style="display: flex; flex-direction: row;">
      <div style="width: 70%; height: 750px;" data-wb-endpoint="{% url 'example_app:player-list' %}" data-wb-hide-control-bar data-wb-lazy-load></div>
      <div style="width: 30%; height: 750px;" data-wb-endpoint="{% url 'example_app:player-detail' 37 %}" data-wb-hide-control-bar></div>
    </div>
    <div style="height: 750px;" data-wb-endpoint="{% url 'example_app:player-statistics-list' 37 %}" data-wb-hide-control-bar></div>
    <div style="height: 750px;" data-wb-endpoint="{% url 'example_app:team-list' %}" data-wb-lazy-load></div>
    <div style="height: 750px;" data-wb-endpoint="{% url 'example_app:stadium-list' %}" data-wb-hide-control-bar data-wb-lazy-load data-wb-lazy-load-threshold="500"></div>
    <script>window.wbcore_config_url = 'https://staging.atonra.stainly-bench.com/wbcore/config/'</script>
    <script src="https://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script>
    <script src="https://stainly-cdn.fra1.cdn.digitaloceanspaces.com/static/{{ version }}/embedded/embeddedWbView-runtime.umd.js" type="module"></script>
    <script src="https://stainly-cdn.fra1.cdn.digitaloceanspaces.com/static/{{ version }}/embedded/embeddedWbView-main.umd.js" type="module"></script>
  </body>
</html>
