html
	head
		title #{title ? title : "Accept Invitation | DevBug"}
		style(type="text/css").
			@import url(https://fonts.googleapis.com/css?family=Roboto:300);

			.login-page {
				width: 500px;
				padding: 6% 0 0;
				margin: auto;
			}

			.form {
				position: relative;
				z-index: 1;
				background: #FFFFFF;
				max-width: 500px;
				min-width: 360px;
				margin: 0 auto 100px;
				padding: 45px;
				text-align: center;
				box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
			}

			.form input {
				font-family: "Roboto", sans-serif;
				outline: 0;
				background: #f2f2f2;
				width: 100%;
				border: 0;
				margin: 0 0 15px;
				padding: 15px;
				box-sizing: border-box;
				font-size: 14px;
				color: #006a81;
			}

			.form button, .form-button {
				font-family: "Roboto", sans-serif;
				text-transform: uppercase;
				outline: 0;
				background: #006a81;
				width: 100%;
				border: 0;
				padding: 12px;
				color: #FFFFFF;
				font-size: 16px;
				-webkit-transition: background 0.6s;
				-moz-transition: background 0.6s;
				-ms-transition: background 0.6s;
				-o-transition: background 0.6s;
				transition: background 0.6s;
				cursor: pointer;
			}

			.form button:hover, .form button:active, .form button:focus, .form-button:hover, .form-button:active, .form-button:focus {
				background: #00b3da;
			}
			
			.form-button {
				text-decoration: none;
			}

			.form .message {
				margin: 15px 0 0;
				color: #b3b3b3;
				font-size: 12px;
			}

			.form .message a {
				color: #006a81;
				text-decoration: none;
			}

			.container .info h1 {
				margin: 0 0 15px;
				padding: 0;
				font-size: 36px;
				font-weight: 300;
				color: #1a1a1a;
			}

			.container .info span {
				color: #4d4d4d;
				font-size: 12px;
			}

			.container .info span a {
				color: #000000;
				text-decoration: none;
			}

			body {
				background: #c7dbdf;
				font-family: "Roboto", sans-serif;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}

			.flitter-logo {
				height: 100px;
				margin-bottom: 15px;
			}

			.form-title, .form-subtitle {
				font-family: "Roboto", sans-serif;
				font-size: 16pt;
				color: #006a81;
			}
			
			.form-subtitle {
				text-align: left;
				/*margin-top: 50px;*/
				font-size: 14pt;
				padding: 15px;
				padding-bottom: 0;
				padding-top: 0;
				margin-bottom: 0;
			}
			
			.left-body {
				text-align: left;
				padding: 15px;
				margin-top: 0;
			}
			
			.row-item {
				margin-left: 10px;
			}
			
			.item-row {
				margin-top: 65px;
			}
			
			.body-sep {
				margin-top: 45px;
				margin-bottom: 45px;
			}
body
	.login-page
		.form
			img.flitter-logo(src="/assets/flitter.png")
			p.form-title View #{invite.api_type.capitalize()}: #{project.name}
			p.left-body You've been invited to view a debugging #{invite.api_type} by #{created_by_user.username}. To accept this invitation, you must have a DevBug account. You may be redirected to the sign-in portal.
			.item-row
				a.form-button.row-item-first(href='/api/v1/invitation/'+invite.id+'/accept') Accept & View
				a.form-button.row-item(href='/dash/v1') Decline
			hr.body-sep
			p.form-subtitle What's DevBug?
			p.left-body DevBug is a debugging output server used to help developers work more efficiently. Using inline-code clients, developers can output variables and data from their programs. This data is stored in a DevBug project, where it can easily be shared with others.