import React from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
function A23pinTop() {
  return (
    <div className={classNames('pinTop left', styles.A23pinTop)}>
      <div id='model-title'>
        <div className='title-row'>
          <div id='title-toggle'>
            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
            <a>
              <i className='icon icon-dpad-left'></i>
            </a>
          </div>
          <div id='title-container-wrapper' rel='tooltip' data-placement='bottom' data-html='true'>
            <div className='title-container  meta-toggle'>
              <div className='co-brand'>
                {'{[{ PRESENTED_BY }]}'}
                <span className='title' id='cobrandTitle'></span>
              </div>
              <div id='title-logo'>
                <i></i>
              </div>
              <div id='gui-name' className='titleText'></div>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a id='more-hint'>
                <i className='icon icon-dpad-down'></i>
              </a>
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a id='less-hint'>
                <i className='icon icon-dpad-up'></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div id='meta-info-wrapper'>
        <div id='meta-info' className='darkGlass'>
          <div id='meta-description'></div>
          <div className='contact-info'>
            <i className='icon icon-user pull-left'></i>
            &#xA0;<div id='contact-data'></div>
          </div>
          <div className='address'>
            <i className='icon icon-pin'></i>
            <span id='addressTxt'></span>
          </div>
          <div id='tag-toggles' className='menu-toggles hidden'>
            <span>{'{[{ MATTERTAG_CONTENT }]}'}</span>
            <div id='tag-inputs' className='menu-radios'>
              <div id='show-tag' className='menu-radio-show'>
                <input id='radio-tag-show' type='radio' name='tags' value='show' />
                <label htmlFor='radio-tag-show'>{'{[{ SHOW }]}'}</label>
              </div>
              <div id='hide-tag' className='menu-radio-hide'>
                <input id='radio-tag-hide' type='radio' name='tags' value='hide' />
                <label htmlFor='radio-tag-hide'>{'{[{ HIDE }]}'}</label>
              </div>
            </div>
          </div>
          <div id='labels-toggles' className='menu-toggles hidden'>
            <span>Labels</span>
            <div id='labels-inputs' className='menu-radios'>
              <div id='show-label' className='menu-radio-show'>
                <input id='radio-labels-show' type='radio' name='labels' value='show' />
                <label htmlFor='radio-labels-show'>Show</label>
              </div>
              <div id='hide-label' className='menu-radio-hide'>
                <input id='radio-labels-hide' type='radio' name='labels' value='hide' />
                <label htmlFor='radio-labels-hide'>Hide</label>
              </div>
            </div>
          </div>
          <div id='share-origin' className='hidden'>
            <hr />
            <div>
              <i className='icon icon-ext-link'></i>
              <div id='share-link-wrapper'></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

const MemoA23pinTop = React.memo(A23pinTop)

export default MemoA23pinTop
