{% set active_page = 'Radio' -%}

{% extends "layouts/" + layout + ".html" %}

{% block styles %}
  <style>
    .portal-pages__header__form {
      margin-top: 0;
      margin-bottom: 150px;
      display: flex;
      align-items: center;
    }
    .mdc-form-field {
      width: 100%;
    }
    .mdc-radio.portal-radio-custom .mdc-radio__native-control:enabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
      border-color: #f44336;
    }
    .mdc-radio.portal-radio-custom .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
      border-color: #f44336;
    }
    .mdc-radio.portal-radio-custom .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle {
      background-color: #ff9800;
    }
  </style>
{% endblock %}

{% block content %}
  <div class="portal-pages__header">
    <div class="portal-pages__header__form">
      <div class="mdc-radio">
        <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
      </div>
      <label id="radio-1-label" for="radio-1">John</label>
    </div>
  </div>
  <section class="portal-pages__content">
    <div class="mdc-layout-grid">
      <div class="mdc-layout-grid__inner">
        <div class="mdc-layout-grid__cell--span-1-desktop"></div>
        <div class="mdc-layout-grid__cell--span-10-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone portal-pages__content-inner">
          <h3 class="portal-pages__heading">Simple Radio Example</h3>
          <p class="mdc-typography--body1">Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.</p>
          <p class="mdc-typography--body1">Otherwise, consider a dropdown, which uses less space than displaying all options.</p>

          <div class="mdc-layout-grid portal-pages__content-grid">
            <div class="mdc-layout-grid__inner">
              <div class="mdc-layout-grid__cell--span-6-desktop">
                <div class="mdc-form-field">
                  <div class="mdc-radio">
                    <input class="mdc-radio__native-control" type="radio" id="ex0-default-radio1" checked name="ex0-default">
                    <div class="mdc-radio__background">
                      <div class="mdc-radio__outer-circle"></div>
                      <div class="mdc-radio__inner-circle"></div>
                    </div>
                  </div>
                  <label id="ex0-default-radio1-label" for="ex0-default-radio1">Default Radio 1</label>
                </div>
                <div class="mdc-form-field">
                  <div class="mdc-radio">
                    <input class="mdc-radio__native-control" type="radio" id="ex0-default-radio2" name="ex0-default">
                    <div class="mdc-radio__background">
                      <div class="mdc-radio__outer-circle"></div>
                      <div class="mdc-radio__inner-circle"></div>
                    </div>
                  </div>
                  <label id="ex0-default-radio2-label" for="ex0-default-radio2">Default Radio 2</label>
                </div>
              </div>
              <div class="mdc-layout-grid__cell--span-6-desktop">
                <div class="demo-radio-row">
                  <div class="mdc-form-field">
                    <div class="mdc-radio portal-radio-custom">
                      <input class="mdc-radio__native-control" type="radio" id="ex0-custom-radio1" checked name="ex0-custom">
                      <div class="mdc-radio__background">
                        <div class="mdc-radio__outer-circle"></div>
                        <div class="mdc-radio__inner-circle"></div>
                      </div>
                    </div>
                    <label id="ex0-custom-radio1-label" for="ex0-custom-radio1">Custom Radio 1</label>
                  </div>
                  <div class="mdc-form-field">
                    <div class="mdc-radio portal-radio-custom">
                      <input class="mdc-radio__native-control" type="radio" id="ex0-custom-radio2" name="ex0-custom">
                      <div class="mdc-radio__background">
                        <div class="mdc-radio__outer-circle"></div>
                        <div class="mdc-radio__inner-circle"></div>
                      </div>
                    </div>
                    <label id="ex0-custom-radio2-label" for="ex0-custom-radio2">Custom Radio 2</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}

{% block scripts %}{% endblock %}