import { defineComponent } from 'vue';
import './index.scss';

export default defineComponent({
  name: 'HomeTitle',
  render() {
    return (
      <div class="pinTop">
        <div id="model-title">
          <div class="title-row">
            <div id="title-toggle">
              <a>
                <i class="icon icon-dpad-left"></i>
              </a>
            </div>
            <div id="title-container-wrapper" data-placement="bottom" data-html="true">
              <div class="title-container  meta-toggle">
                <div class="co-brand">
                  {'{[{ PRESENTED_BY }]}'}
                  <span class="title" id="cobrandTitle"></span>
                </div>
                <div id="title-logo">
                  <i></i>
                </div>
                <div id="gui-name" class="titleText"></div>
                <a id="more-hint">
                  <i class="icon icon-dpad-down"></i>
                </a>
                <a id="less-hint">
                  <i class="icon icon-dpad-up"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div id="meta-info-wrapper">
          <div id="meta-info" class="darkGlass">
            <div id="meta-description"></div>
            <div class="contact-info">
              <i class="icon icon-user pull-left"></i>
              &#xA0;<div id="contact-data"></div>
            </div>
            <div class="address">
              <i class="icon icon-pin"></i>
              <span id="addressTxt"></span>
            </div>
            <div id="tag-toggles" class="menu-toggles hidden">
              <span>{'{[{ MATTERTAG_CONTENT }]}'}</span>
              <div id="tag-inputs" class="menu-radios">
                <div id="show-tag" class="menu-radio-show">
                  <input id="radio-tag-show" type="radio" name="tags" value="show" />
                  <label for="radio-tag-show">{'{[{ SHOW }]}'}</label>
                </div>
                <div id="hide-tag" class="menu-radio-hide">
                  <input id="radio-tag-hide" type="radio" name="tags" value="hide" />
                  <label for="radio-tag-hide">{'{[{ HIDE }]}'}</label>
                </div>
              </div>
            </div>
            <div id="labels-toggles" class="menu-toggles hidden">
              <span>Labels</span>
              <div id="labels-inputs" class="menu-radios">
                <div id="show-label" class="menu-radio-show">
                  <input id="radio-labels-show" type="radio" name="labels" value="show" />
                  <label for="radio-labels-show">Show</label>
                </div>
                <div id="hide-label" class="menu-radio-hide">
                  <input id="radio-labels-hide" type="radio" name="labels" value="hide" />
                  <label for="radio-labels-hide">Hide</label>
                </div>
              </div>
            </div>
            <div id="share-origin" class="hidden">
              <div>
                <i class="icon icon-ext-link"></i>
                <div id="share-link-wrapper"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  },
});
