content: import React from 'react';
  import { equalsEmptyObject, finishMap } from '@/js/util';
  
  export default class Timeline extends React.Component {
    static createTag(text, id) {
      return (
        <span className={'tag'} key={id}>
          {text}
        </span>
      );
    }
  
    render() {
      if (equalsEmptyObject(this.props.events)) {
        return <div />;
      }
  
      const appearances = this.props.events.map((e) => {
        let marker;
  
        if (e.won_event) {
          marker = (
            <div className={'timeline-marker is-icon is-link'} key={`mrkr-${e.id}`}>
              <i className={'fa fa-trophy'} key={`i-${e.id}`} />
            </div>
          );
        } else {
          marker = (
            <div className={'timeline-marker is-primary'} key={`mrkr-${e.id}`} />
          );
        }
  
  
        const awardTags = e.awards.map(a => (
          <span
            className={`tag ${a.blue_banner ? 'is-link' : ''}`}
            key={`${a.event}-${a.award_type}-${e.id}`}
          >
            {a.specific_name}
          </span>
        ));
  
        if (e.finish !== 'qm' && e.finish !== 'f') {
          awardTags.push(Timeline.createTag(finishMap[e.finish], `finish-${e.id}`));
        }
  
        return (
          <div key={`wr-${e.event.key}`}>
            <li className={'timeline-header'}>
              <span className={'tag is-primary'}>Week {e.event.week}</span>
            </li>
            <li className={'timeline-item'}>
              {marker}
              <div className={'timeline-content'}>
                <p className={'heading'}>{e.event.short_name}</p>
                <div>
                  <div className={'tags'}>
                    {awardTags}
                  </div>
                </div>
              </div>
            </li>
          </div>
        );
      });
  
      return (
        <ul className={'timeline'} style={{ listStyle: 'none', margin: 0 }}>
          {appearances}
          <li className="timeline-header">
            <span className="tag is-medium is-primary">
              {this.props.events.length} Events
            </span>
          </li>
        </ul>
      );
    }
  }
  