<github-repos-widget data-user="liginc"></github-repos-widget>
<github-repos-widget data-user="i78s"></github-repos-widget>

<script type="module">
import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js';
import { repeat } from 'https://unpkg.com/lit-html@0.7.1/lib/repeat.js';
  
export default class GithubReposWidget extends HTMLElement {
  get template() {
    return html`<style>
      * {
        margin: 0;
        padding: 0;
      }
      .repo-list {
        list-style: none;
      }
      .repo-item {
        display: flex;
        align-items: center;
        border: 1px solid #eee;
        padding: 10px 0;
        color: #2a2a2a;
        text-decoration: none;
        
        margin-bottom: 15px;
      }
      .repo-item-thumb {
        width: 80px;
        height: 80px;
        background-color: #eee;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50%;
        border: 1px solid #eee;
        
        margin-left: 10px;
      }
      .repo-item-body {
        padding: 0 20px;
      }
    </style>
      <ul class="repo-list">
      ${repeat(this.list, (el) => el.html_url, (el, index) => html`
        <li>
          <a href="${el.html_url}" class="repo-item" target="_blank">
            <div>
                <div 
                  class="repo-item-thumb"
                  style="background-image: url(${el.owner.avatar_url})"
                  >
                </div>
            </div>
            <div class="repo-item-body">
              <h2>${el.name}</h2>
              <p>${el.description}</p>
            </div>
          </a>
        </li>
      `)}
    </ul>`;
  }
  
  constructor() {
    super();
    this.attachShadow({
      mode: 'open'
    });
    this.list = [];
    this.init();
  }

  init() {
    const user = this.getAttribute('data-user');
    this.getList(user)
      .then((data) => {
          this.list = data;
          this.render();
      });
  }
  
  getList(user) {
    return fetch(`https://api.github.com/users/${user}/repos`, {
      mode: 'cors'
    })
      .then((res) => {
        if (res.status !== 200) return;
        return res.json();
      });
  }

  render() {
    render(this.template, this.shadowRoot);
  }
}
customElements.define('github-repos-widget', GithubReposWidget);
</script>