{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}

{%- block content %}
  {%- include "@oe-bcl/bcl-navigation/navigation.html.twig" with navigation only -%}
  <div class="tab-content">{# -#}
    <div class="tab-pane fade show active" id="view" role="tabpanel" aria-labelledby="view-tab">
      {%- include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with view.banner only -%}
      <div class="mt-3 mt-md-4-75 pt-4-75 mb-3">
        {%- include '@oe-bcl/bcl-heading/heading.html.twig' with {
          title: 'Personal information',
          title_tag: 'h2',
          attributes: create_attribute().addClass(['mb-4']),
        } only -%}
        <div class="row">{# -#}
          <div class="col-12 col-md-6">{# -#}
            <div class="row">{# -#}
              <div class="col-12 col-md-4">{# -#}
                <p class="mb-0">Gender:</p>{# -#}
              </div>{# -#}
              <div class="col-12 col-md-8">{# -#}
                <p>Male</p>{# -#}
              </div>{# -#}
            </div>{# -#}
            <div class="row">{# -#}
              <div class="col-12 col-md-4">{# -#}
                <p class="mb-0">Nationality:</p>{# -#}
              </div>{# -#}
              <div class="col-12 col-md-8">{# -#}
                <p>German</p>{# -#}
              </div>{# -#}
            </div>{# -#}
            <div class="row">{# -#}
              <div class="col-12 col-md-4">{# -#}
                <p class="mb-0">Date of birth:</p>{# -#}
              </div>{# -#}
              <div class="col-12 col-md-8">{# -#}
                <p>22/01/1972</p>{# -#}
              </div>{# -#}
            </div>{# -#}
          </div>{# -#}
          <div class="col-12 col-md-6">{# -#}
            <div class="row">{# -#}
              <div class="col-12 col-md-4">{# -#}
                <p class="mb-0">Country:</p>{# -#}
              </div>{# -#}
              <div class="col-12 col-md-8">{# -#}
                <p>Germany</p>{# -#}
              </div>{# -#}
            </div>{# -#}
            <div class="row">{# -#}
              <div class="col-12 col-md-4">{# -#}
                <p class="mb-0">City:</p>{# -#}
              </div>{# -#}
              <div class="col-12 col-md-8">{# -#}
                <p>Düsseldorf</p>{# -#}
              </div>{# -#}
            </div>{# -#}
          </div>{# -#}
        </div>{# -#}
      </div>{# -#}
      <div class="my-3">
        {%- include '@oe-bcl/bcl-heading/heading.html.twig' with {
          title: 'Professional information',
          title_tag: 'h2',
          attributes: create_attribute().addClass(['mb-4']),
        } only -%}
        <div class="row">{# -#}
          <div class="col-12 col-md-6">{# -#}
            <div class="row">{# -#}
              <div class="col-12 col-md-4">{# -#}
                <p class="mb-0">Organisation:</p>{# -#}
              </div>{# -#}
              <div class="col-12 col-md-8">{# -#}
                <p>DG Test</p>{# -#}
              </div>{# -#}
            </div>{# -#}
            <div class="row">{# -#}
              <div class="col-12 col-md-4">{# -#}
                <p class="mb-0">Position:</p>{# -#}
              </div>{# -#}
              <div class="col-12 col-md-8">{# -#}
                <p>Director</p>{# -#}
              </div>{# -#}
            </div>{# -#}
          </div>{# -#}
          <div class="col-12 col-md-6">{# -#}
            <div class="row">{# -#}
              <div class="col-12 col-md-4">{# -#}
                <p class="mb-0">Working languages:</p>{# -#}
              </div>{# -#}
              <div class="col-12 col-md-8">{# -#}
                <p>English, German</p>{# -#}
              </div>{# -#}
            </div>{# -#}
          </div>{# -#}
        </div>{# -#}
      </div>{# -#}
    </div>{# -#}
    <div class="tab-pane fade" id="edit" role="tabpanel" aria-labelledby="edit-tab">{# -#}
      <h1 class="my-4-5">Edit my profile</h1>{# -#}
      <h2 class="mb-4-5">Profile image</h2>{# -#}
      <div class="row">{# -#}
        <div class="bcl-card-start-col bcl-size-large mx-auto ms-md-2-5">{# -#}
          <img src="https://picsum.photos/seed/1002/400/400" class="img-fluid" alt="profile-image">{# -#}
        </div>{# -#}
        <div class="col-12 col-md align-self-center">{# -#}
          <div class="mt-3 text-center text-md-start">
            {%- include '@oe-bcl/bcl-form-input/form-input.html.twig' with edit.image_upload_input only -%}
            <div class="d-md-inline-block">
              {%- include '@oe-bcl/bcl-button/button.html.twig' with edit.remove_image_button only -%}
            </div>{# -#}
          </div>{# -#}
        </div>{# -#}
      </div>{# -#}
      <div class="row">{# -#}
        <div class="col-12">
          {%- include '@oe-bcl/bcl-form/form.html.twig' with edit.profile_information only -%}
        </div>{# -#}
      </div>{# -#}
    </div>{# -#}
    <div class="tab-pane fade" id="privacy" role="tabpanel" aria-labelledby="privacy-tab">{# -#}
      <h1 class="my-4-5">Privacy settings</h1>{# -#}
      <p>Who can consult my data</p>
      {%- include '@oe-bcl/bcl-form/form.html.twig' with privacy.settings only -%}
    </div>{# -#}
    <div class="tab-pane fade" id="visibility" role="tabpanel" aria-labelledby="visibility-tab">{# -#}
      <h1 class="my-4-5">Visibility settings</h1>{# -#}
      <p class="mb-3">Select what information should be displayed to your profile.</p>
      {%- include '@oe-bcl/bcl-form/form.html.twig' with privacy.public_profile_content only -%}
    </div>{# -#}
    <div class="tab-pane fade" id="cancel" role="tabpanel" aria-labelledby="cancel-tab">{# -#}
      <h1 class="my-4-5">Are you sure you want to cancel your account?</h1>{# -#}
      <p class="mb-3">When cancelling your account</p>
      {%- include '@oe-bcl/bcl-form/form.html.twig' with cancel.form only -%}
    </div>{# -#}
  </div>
{%- endblock -%}