@use "../../vars.scss" as *;
@use "../../mixins/breakpoints" as *;

.dotdungeon .actor--pc {
	display: grid;
	grid-template-areas:
		"profile stats stats"
		"profile skills skills"
		"sync skills skills"
		"spells weapons aspect"
		"spells weapons aspect"
		"backpack roles mounts"
		"backpack roles mounts"
		"summons storage storage"
		"summons storage storage";
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows:
		min-content
		1fr
		repeat(7, min-content);
	padding: 4px;
	gap: 4px;

	details {
		border-radius: 4px;
		background-color: rgba(0,0,0, 0.2);
		padding: 4px;
		margin-bottom: 8px;

		summary {
			cursor: pointer;
		}

		&[open] {
			.expanded-rotate {
				transform: rotate(90deg);
			}
		}
	}

	.panel {
		&--profile {
			grid-area: profile;
			.avatar {
				width: 100%;
				aspect-ratio: 1/1;
			}

			label, input {
				width: 100%;
			}
		}
		&--stats {
			grid-area: stats;
			.panel__content {
				display: flex;
				flex-direction: row;
				gap: 8px;
				justify-content: space-evenly;
				padding: 8px;
				flex-wrap: wrap;
			}
		}
		&--skills {
			grid-area: skills;

			.panel__content {
				display: grid;
				row-gap: 8px;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				grid-template-rows: repeat(2, minmax(0, min-content));
			}
		}
		&--backpack {
			grid-area: backpack;

			.row {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.col {
				display: flex;
				flex-direction: column;
			}
			.grow {
				flex-grow: 1;
			}

			.panel__content {
				display: flex;
				flex-direction: column;
				gap: 4px;
			}

			.bytes-input,
			.supplies-count,
			.materials-count {
				width: 25%;
				text-align: center;
			}

			textarea {
				resize: vertical;
			}
		}
		&--sync {
			grid-area: sync;

			.panel__content {
				display: flex;
				flex-direction: column;
				gap: 4px;
			}

			.respawns,
			.sync {
				display: flex;
				flex-direction: row;
				align-items: center;

				&__header {
					flex-grow: 1;
				}
			}

			.sync__input {
				width: 80px;
				margin: 3px 5px;
			}
		}
		&--aspect {
			grid-area: aspect;
			.panel__content {
				display: grid;
				grid-template-rows: min-content min-content min-content 1fr;
				height: 100%;
				gap: 4px;

				textarea {
					resize: vertical;
				}
			}
		}
		&--weapons {
			grid-area: weapons;

			.weapon {
				margin-top: 4px;
				display: flex;
				flex-direction: column;
				gap: 4px;

				&__name {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					input {
						width: 50%
					}
				}
				&__group {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 4px;
				}
				&__ammo-type, &__damage-type {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				&__is-scoped, &__is-ranged {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}
			}
		}
		&--roles {
			grid-area: roles;
			.panel__content {
				display: grid;
				grid-template-rows: repeat(4, min-content);
				height: 100%;
				gap: 4px;

				textarea {
					resize: vertical;
				}
			}
		}
		&--spells {
			grid-area: spells;
		}
		&--mounts {
			grid-area: mounts;
		}
		&--summons {
			grid-area: summons;
		}
		&--storage {
			grid-area: storage;
		}
	}
}


@include bp-m {
	.dotdungeon {
		.actor--pc {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-template-rows: repeat(15, min-content);
			grid-template-areas:
				"profile stats"
				"profile skills"
				"sync skills"
				"weapons skills"
				"weapons skills"
				"backpack aspect"
				"backpack aspect"
				"backpack roles"
				"backpack roles"
				"backpack roles"
				"backpack spells"
				"summons spells"
				"summons storage"
				"mounts storage"
				"mounts storage";

			.panel {
				&--stats {
					.panel__content {
						flex-wrap: wrap;
					}
				}

				&--skills {
					.panel__content {
						display: flex;
						flex-direction: column;
					}
				}
			}
		}
	}
}

@include bp-s {
	.dotdungeon {
		.actor--pc {
			grid-template-columns: 1fr;
			grid-template-rows: repeat(12, min-content);
			grid-template-areas:
				"profile"
				"stats"
				"sync"
				"skills"
				"aspect"
				"roles"
				"backpack"
				"weapons"
				"spells"
				"mounts"
				"summons"
				"storage";

			.panel {
				&--skills {
					.skill {
						flex-direction: column;
					}
				}
			}
		}
	}
}