cfpb/owning-a-home

<!-- Default sections data -->

{% set more_information = {
      'title' : 'More Information',
      'links': [
          { 
            'desc': 'Want an advisor in the home-buying process?',
            'urls': [
              {
                'label': 'Find a HUD-certified housing counselor', 
                'url': '/find-a-housing-counselor/'
              }
            ]
          },
          { 
            'desc': 'Have a mortgage question?',
            'urls': [
              {
                'label': 'Get answers from AskCFPB', 
                'url': '/askcfpb/search/?selected_facets=category_exact:mortgages'
              }
            ]
          }
       ]
} -%}

{% set need_help = {
      'title' : 'Need Help?',
      'links': [
          { 
            'desc': 'Have a complaint?',
            'urls': [
              {
                'label': 'Submit it to the CFPB', 
                'url': '/complaint/'
              }
            ]
          },
          { 
            'desc': 'Trouble paying your mortgage?',
            'urls': [
              {
                'label': 'We can help', 
                'url': '/mortgagehelp/'
              }
            ]
            
          }
        ]
} -%}

{% set about_us = {
      'title' : 'About the CFPB',
      'links': [
        {
          'desc': 'The Consumer Financial Protection Bureau (CFPB) is a government agency created to ensure that prices are clear upfront, risks are visible, and nothing is buried in fine print.',
          'urls': [
            {
              'label': 'Learn more about us', 
              'url': '/the-bureau/'
            }
          ]
        }
      ], 
      'col': '2-3'
} -%}



{# ==========================================================================

   render(process_links, tools_links)

   ==========================================================================

   Description:

   Renders all the related links content.

   process_links,
   tools_links:        The related links block contains 5 pre-determined sections,
                       in two rows:
                       Row 1: Know the Process, Tools and Resources, More Information
                       Row 2: Need help?, About the CFPB
                       Only the first two sections have links that change by page.
                       
                       Since most of the content is standard, we just pass in
                       arrays containing the links for the first two sections on the page,
                       in the below format:
                       
                       [
                         { 
                           'desc': 'description for link'
                           'urls': [
                            {
                              'link': 'link label',
                              'url': 'link url'
                            }
                           ]
                          }  
                        ]  

   ========================================================================== #}

{% macro render(process_links, tools_links) %}
  {% set process = {
      'title': 'Know the Process',
      'links': process_links
  }%}
  {% set tools = {
      'title': 'Tools and Resources',
      'links': tools_links
  }%}
  <aside class="block block__bg block__border block__flush-bottom block__flush-top related-links">
    {{render_row([process, tools, more_information])}}
    {{render_row([need_help, about_us])}}
  </aside>
{% endmacro %}


{# ==========================================================================

   render_row(data)

   ==========================================================================

   Description:

   Render a row of related-link sections.
   
   sections:          An array of section objects. Each section object
                      contains a title and an array of link objects. It
                      can also contain an optional col property, determining
                      how many columns the section spans (defaults to 1-3);    

   ========================================================================== #}

{% macro render_row(sections) %}
    <div class="content-l">
      {% for section in sections %}
        {{render_section(section)}}
      {% endfor %}
    </div>
{% endmacro %}


{# ==========================================================================

   render_section(data)

   ==========================================================================

   Description:

   Render a section of related links.
   
   data:              An object, containing:
                      - title (req): title of section
                      - links (req): An array of link objects. Each object should include a 
                                     description, a label, and a url.
                      - type (opt): Link icon
                      - col (opt): Column width for this section. Defaults to 1-3.
    

   ========================================================================== #}

{% macro render_section(data) %}
  <div class="content-l_col content-l_col-{{data.col|default('1-3')}}">
    <h2 class="header-slug">
      <span class="header-slug_inner">{{data.title}}</span>
    </h2>
    <ul class="related-links_list">
      {% for link in data.links %}
        <li>
          <p class="short-desc">
            {{link.desc|safe}}
          </p>
          <ul class="list list__links list__unstyled">
          {% for url in link.urls %}
          <li class="list_item u-mb15">
            <a class="jump-link jump-link__block {{'jump-link__' + url.type if url.type}}" href="{{url.url}}">
              <span class="jump-link_text">{{url.label|safe}}</span>
            </a>
          </li>
          {% endfor %}
          </ul>
        </li>
      {% endfor %}
    </ul>
  </div>
{% endmacro %}