const template = document.createElement('template');

template.innerHTML = `
<style>
#profilePic {
	border-radius: var(--wc-profile-pic-border-radius);
	width: var(--wc-profile-pic-size);
	height: var(--wc-profile-pic-size);
}
</style>

<img src="" id="profilePic"/>
`

class profilePic extends HTMLElement {
	constructor() {
		super();

		this._shadowRoot = this.attachShadow({ 'mode': 'open' });
		this._shadowRoot.appendChild(template.content.cloneNode(true));
		this.$profilePic = this._shadowRoot.querySelector('#profilePic');
	}

	static get observedAttributes() {
		return ['url'];
	}

	attributeChangedCallback(name, oldVal, newVal) {
		if (oldVal != newVal) {
			this[name] = newVal;
			this.render();
		}
	}

	render() {
		this.url ? this.$profilePic.src = this.url : null;
	}
}

window.customElements.define('wc-profile-pic', profilePic);