import {
    LitElement,
    html,
    css
} from "./lit-core.min.js";



export class Alert extends LitElement {
    static properties = {
        title: {
            type: String
        },
        text: {
            type: String
        },
    }



    static styles = css `
	.alert
	{
		width: 420px;
		position: fixed;
		height: fit-content;
		background:white;
		color:black;
		top:45%;
		left:45%;
		padding: 10px;
		transform: translate(-45%, -45%);
		border-radius: 5px;
		z-index: 100000;
		box-shadow: 1px 1px 2px 2px lightgrey;
	}

	.head
	{
		font-weight: bolder;
		padding:1px;
		margin-top:10px;
	}

	.body
	{
		padding:10px;
		margin-top: 10px;
		min-height: 100px;
		color:black;
	}
	.close:hover
	{
		color:red;
		cursor: pointer;
	}

	@media only screen and (max-width:650px)
	{
		.alert
		{
			width: 95%;
			margin-left:1px;
			margin-right: 5px;
		}
	}
	`;

    constructor() {
        super();


    }

    alert() {
        return html `
    	<section class="alert" style="">
		<div class="head" style="display: flex;" >
		<div class="title" style="flex-basis: 90%;white-space: nowrap;
		overflow: hidden;text-overflow: ellipsis;padding:0px 5px;font-weight:bolder;">
			${this.title} 
		</div>
		<div class="close "  style="margin-left: 2px;padding:0px 5px;flex-basis: 10%;text-align: right;">
			<span @click=${(i)=>{this.shadowRoot.querySelector(".alert").remove()}}>&#10005;</span>
		</div>		
		</div>
		<div class="body ">
		${this.text}
		</div>

		</section>
    	`;
    }

    render() {
        return this.alert();

    }

}



customElements.define('show-alert', Alert);