<!doctype html>
<html>
  <head>
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="/static/style.css">
  </head>
  <body>
    <div class="page">
      <h1>Micawber Example</h1>

      <h2>Text renderer</h2>
      <form method="get">
        <p>
          <label>Enter some text</label>
        </p>
        <p>
          <textarea cols=50 rows=5 name="text">{{ text }}</textarea>
          <small style="display:block;">Try entering some urls to youtube videos</small>
        </p>
        <p>
          <button type="submit">Render</button>
        </p>
      </form>

      {% if text %}
      <h3>Rendered</h3>
      <div>
        {{ text|oembed() }}
      </div>

      <h3>Extracted data</h3>
      <textarea cols=50 rows=5>
        {{ text|extract_oembed() }}
      </textarea>
      {% endif %}

      <h2>HTML renderer</h2>
      <form method="get">
        <p>
          <label>Enter some html</label>
        </p>
        <p>
          <textarea cols=50 rows=5 name="text">{{ html|safe }}</textarea>
        </p>
        <p>
          <button type="submit">Render</button>
        </p>
      </form>

      {% if html %}
      <h3>Rendered</h3>
      <div>
        {{ html|oembed(html=True) }}
      </div>
      {% endif %}
    </div>
  </body>
</html>
